Skip to content

fix: compact Available Connectors row layout #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
graydawnc merged 2 commits into from
Apr 14, 2026
+29 −35
Merged

fix: compact Available Connectors row layout #73

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b5ff24
fix: compact Available Connectors row layout
graydawnc Apr 14, 2026
5c92fac
fix: truncate long Available Connectors meta to single line
graydawnc Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 29 additions & 35 deletions packages/app/src/renderer/components/SettingsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -729,43 +729,37 @@ function ConnectorsTab({ claudeCount, codexCount, geminiCount }: { claudeCount:
{!registryLoading && !registryError && discoverPackages.length === 0 && (
<p className="text-[11px] text-warm-faint dark:text-dark-muted">All connectors installed</p>
)}
{!registryLoading && !registryError && discoverPackages.map(pkg => (
<div
key={pkg.name}
className="flex items-center gap-3 py-2.5"
>
<span
className="w-2 h-2 rounded-full flex-none opacity-50"
style={{ background: pkg.color }}
/>
<div className="flex-1 min-w-0 leading-4">
<span className="text-xs text-warm-muted dark:text-dark-muted">{pkg.label}</span>
{pkg.subs.length > 1 ? (
<div className="mt-1 space-y-0.5">
{pkg.subs.map((sub, i) => (
<div key={i} className="flex items-baseline gap-1.5 text-[11px]">
<span className="text-warm-faint dark:text-dark-faint">·</span>
<span className="text-warm-muted dark:text-dark-muted">{stripLabelPrefix(sub.label, pkg.label)}</span>
<span className="text-warm-faint dark:text-dark-faint">{sub.description}</span>
</div>
))}
{!registryLoading && !registryError && discoverPackages.map(pkg => {
const meta = pkg.subs.length > 1
? pkg.subs.map(s => stripLabelPrefix(s.label, pkg.label)).join(', ')
: pkg.description
return (
<div key={pkg.name} className="flex items-center gap-3 py-2.5">
<span
className="w-2 h-2 rounded-full flex-none opacity-50"
style={{ background: pkg.color }}
/>
<div className="flex-1 min-w-0 leading-4">
<div className="flex items-baseline gap-2 min-w-0">
<span className="text-xs text-warm-muted dark:text-dark-muted flex-none">{pkg.label}</span>
{meta && (
<span className="text-[11px] text-warm-faint dark:text-dark-muted truncate min-w-0" title={meta}>{meta}</span>
)}
</div>
) : (
<span className="text-[11px] text-warm-faint dark:text-dark-faint ml-2">{pkg.description}</span>
)}
{installErrors[pkg.name] && installingPackage !== pkg.name && (
<div className="text-[10px] text-red-400 mt-0.5">{installErrors[pkg.name]}</div>
)}
{installErrors[pkg.name] && installingPackage !== pkg.name && (
<div className="text-[10px] text-red-400 mt-0.5">{installErrors[pkg.name]}</div>
)}
</div>
<button
onClick={() => handleInstall(pkg.name)}
disabled={installingPackage === pkg.name}
className="text-[11px] font-medium text-accent dark:text-accent-dark hover:underline disabled:opacity-50 flex-none"
>
{installingPackage === pkg.name ? 'Installing…' : 'Install'}
</button>
</div>
<button
onClick={() => handleInstall(pkg.name)}
disabled={installingPackage === pkg.name}
className="text-[11px] font-medium text-accent dark:text-accent-dark hover:underline disabled:opacity-50 flex-none"
>
{installingPackage === pkg.name ? 'Installing…' : 'Install'}
</button>
</div>
))}
)
})}
</Section>

{syncError && (
Expand Down