fix(mcp): align mcp server icons

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,24 +62,29 @@ 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}
           </span>
         </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>

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>
   );

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>
   );