From 96c1b0e898481dfd08d519c2e17767927b7c2b8f Mon Sep 17 00:00:00 2001
From: Jan Burzinski <156842394+janburzinski@users.noreply.github.com>
Date: Tue, 16 Jun 2026 18:19:31 +0200
Subject: [PATCH 1/3] fix(mcp): align server icons

---
 apps/emdash-desktop/src/renderer/utils/mcpIcons.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/emdash-desktop/src/renderer/utils/mcpIcons.tsx b/apps/emdash-desktop/src/renderer/utils/mcpIcons.tsx
index 5f5052e9e3..028c5ccd98 100644
--- a/apps/emdash-desktop/src/renderer/utils/mcpIcons.tsx
+++ b/apps/emdash-desktop/src/renderer/utils/mcpIcons.tsx
@@ -33,24 +33,20 @@ export const McpServerIcon: React.FC<{ name: string; iconKey?: string }> = ({ na
   const renderIcon = () => {
     if (icon?.type === 'svg') {
       const processed = prepareInlineSvgMarkup(icon.data);
-      return <div dangerouslySetInnerHTML={{ __html: processed }} />;
+      return <div className="size-5" dangerouslySetInnerHTML={{ __html: processed }} />;
     }
 
     if (icon?.type === 'png') {
       return (
-        <img
-          src={icon.url}
-          alt={name}
-          className="h-full w-full object-contain brightness-0 dark:invert"
-        />
+        <img src={icon.url} alt={name} className="size-5 object-contain brightness-0 dark:invert" />
       );
     }
 
-    return <Server className="text-muted-foreground h-5 w-5" />;
+    return <Server className="size-5 text-foreground-muted" />;
   };
 
   return (
-    <div className="size-10 rounded-lg bg-background-2 p-3 transition-colors group-hover:bg-background-3">
+    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-background-2 transition-colors group-hover:bg-background-3">
       {renderIcon()}
     </div>
   );

From 351de3183197660bd4b035cdb311e616437cf9ce Mon Sep 17 00:00:00 2001
From: Jan Burzinski <156842394+janburzinski@users.noreply.github.com>
Date: Tue, 16 Jun 2026 18:40:04 +0200
Subject: [PATCH 2/3] feat(renderer): make card grid auto-fit cards

Let card grids grow and wrap naturally instead of staying locked to
fixed two-column breakpoints. This keeps card layouts usable across a
wider range of window sizes and content widths.
---
 .../src/renderer/lib/components/card-grid.tsx             | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/emdash-desktop/src/renderer/lib/components/card-grid.tsx b/apps/emdash-desktop/src/renderer/lib/components/card-grid.tsx
index 6525a80f66..4e029350ae 100644
--- a/apps/emdash-desktop/src/renderer/lib/components/card-grid.tsx
+++ b/apps/emdash-desktop/src/renderer/lib/components/card-grid.tsx
@@ -4,7 +4,13 @@ import { MicroLabel } from '../ui/label';
 
 export function CardGrid({ children, className, ...props }: ComponentProps<'div'>) {
   return (
-    <div className={cn('grid grid-cols-1 gap-3 sm:grid-cols-2', className)} {...props}>
+    <div
+      className={cn(
+        'grid grid-cols-[repeat(auto-fit,minmax(min(100%,16rem),1fr))] gap-3',
+        className
+      )}
+      {...props}
+    >
       {children}
     </div>
   );

From 1ff3d2071404fd1f2cf184ccbe6ac38b6d8e770c Mon Sep 17 00:00:00 2001
From: Jan Burzinski <156842394+janburzinski@users.noreply.github.com>
Date: Tue, 16 Jun 2026 18:40:24 +0200
Subject: [PATCH 3/3] feat(mcp): improve MCP card provider overflow

Keep MCP cards compact by showing only the first few synced provider
icons and summarizing the remainder with a count. The card header also
gets stricter min-width handling so titles and actions align cleanly.
---
 .../features/mcp/components/McpCard.tsx       | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/emdash-desktop/src/renderer/features/mcp/components/McpCard.tsx b/apps/emdash-desktop/src/renderer/features/mcp/components/McpCard.tsx
index 3c3af9b65b..188afcdd2c 100644
--- a/apps/emdash-desktop/src/renderer/features/mcp/components/McpCard.tsx
+++ b/apps/emdash-desktop/src/renderer/features/mcp/components/McpCard.tsx
@@ -16,6 +16,8 @@ interface McpCardProps {
   onAdd?: (entry: McpCatalogEntry) => void;
 }
 
+const MAX_VISIBLE_PROVIDERS = 5;
+
 function getTransport(server?: McpServer, entry?: McpCatalogEntry): 'stdio' | 'http' {
   if (server) return server.transport;
   const cfg = entry?.defaultConfig;
@@ -34,6 +36,8 @@ export const McpCard: React.FC<McpCardProps> = ({ server, catalogEntry, onEdit,
   const syncedProviders = (server?.providers ?? []).filter((id) =>
     agentIds.has(id)
   ) as AgentProviderId[];
+  const visibleProviders = syncedProviders.slice(0, MAX_VISIBLE_PROVIDERS);
+  const hiddenProviderCount = syncedProviders.length - visibleProviders.length;
 
   const handleClick = () => {
     if (isInstalled && server && onEdit) {
@@ -58,8 +62,8 @@ export const McpCard: React.FC<McpCardProps> = ({ server, catalogEntry, onEdit,
     >
       <McpServerIcon name={name} iconKey={catalogEntry?.key ?? server?.name} />
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <div className="flex items-center gap-2">
-          <h3 className="text-smd truncate">{name}</h3>
+        <div className="flex min-w-0 items-center gap-2">
+          <h3 className="text-smd min-w-0 truncate">{name}</h3>
           <span className="inline-flex shrink-0 items-center gap-0.5 rounded bg-background-2 px-1 py-0.5 text-[10px] text-foreground-muted">
             {transport === 'http' ? <Globe className="size-2" /> : <Terminal className="size-2" />}
             {transport}
@@ -67,15 +71,20 @@ export const McpCard: React.FC<McpCardProps> = ({ server, catalogEntry, onEdit,
         </div>
         {description && <p className="line-clamp-1 text-xs text-foreground-muted">{description}</p>}
         {syncedProviders.length > 0 && (
-          <div className="mt-1.5 flex items-center gap-1">
-            {syncedProviders.map((id) => (
+          <div className="mt-1.5 flex flex-wrap items-center gap-1">
+            {visibleProviders.map((id) => (
               <AgentIcon key={id} id={id} size={14} className="rounded-sm" />
             ))}
+            {hiddenProviderCount > 0 && (
+              <span className="text-[10px] leading-none text-foreground-muted">
+                +{hiddenProviderCount}
+              </span>
+            )}
           </div>
         )}
       </div>
 
-      <div className="absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+      <div className="absolute inset-y-0 right-0 flex items-center gap-1 rounded-r-lg bg-linear-to-r from-transparent to-background-2 pr-3 pl-10 opacity-0 transition-opacity group-hover:opacity-100">
         {docsUrl && (
           <Tooltip>
             <TooltipTrigger>