fix(mcp): align mcp server icons

[janburzinski]

Description

• fixes responsiveness on mcp server page

Screenshot/Recording (if applicable)

https://streamable.com/0z80w8

Checklist

• I kept this PR small and focused
• I ran a self-review before opening this PR
• I ran the relevant local checks or explained why not
• I updated docs when behavior or setup changed
• I added or updated tests when behavior changed, or explained why not
• I only added comments where the logic is not obvious
• I used Conventional Commits for commit
  messages and, when possible, the PR title

[greptile-apps]

Greptile Summary

This PR fixes visual alignment of icons in MCP server cards and improves grid responsiveness. It replaces fixed padding-based icon centering with flex items-center justify-center, adds min-w-0 to enable proper text truncation, limits visible provider icons to 5 with an overflow indicator, and upgrades the CardGrid layout to a fluid auto-fit grid.

• mcpIcons.tsx: The icon container switches from p-3 padding to flex items-center justify-center for reliable cross-browser centering; the SVG wrapper gains an explicit size-5 class, which works because prepareInlineSvgMarkup already injects class="h-full w-full" on the inner <svg>.
• McpCard.tsx: Provider icons are capped at 5 with a +N label for overflow, min-w-0 is added to both the flex row and the <h3> to fix truncation, and the hover action-button overlay switches from a vertically-centered absolute div to a full-height gradient that matches the card background.
• card-grid.tsx: The two-breakpoint grid-cols-1 sm:grid-cols-2 layout is replaced with repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), producing a fluid column count on all screen sizes without hardcoded breakpoints.

Confidence Score: 5/5

Safe to merge — all changes are purely visual layout fixes with no data-flow or logic changes.

The diff is limited to Tailwind class adjustments: replacing padding-based centering with flexbox, adding min-w-0 for text truncation, capping provider icon overflow, and upgrading the grid to auto-fit. The SVG rendering path is unaffected because prepareInlineSvgMarkup already injects h-full w-full on the inner SVG, so the new size-5 wrapper works correctly. The bg-linear-to-r gradient is the established Tailwind v4 syntax already used elsewhere in the codebase.

No files require special attention.

Important Files Changed

Filename	Overview
apps/emdash-desktop/src/renderer/utils/mcpIcons.tsx	Fixes icon centering by replacing p-3 padding with flex layout; adds size-5 to SVG wrapper (safe because prepareInlineSvgMarkup injects h-full w-full on the SVG); adds shrink-0 to prevent icon squishing.
apps/emdash-desktop/src/renderer/features/mcp/components/McpCard.tsx	Adds MAX_VISIBLE_PROVIDERS cap (5) with +N overflow indicator, fixes text truncation via min-w-0 on flex container and h3, upgrades hover overlay to full-height gradient approach.
apps/emdash-desktop/src/renderer/lib/components/card-grid.tsx	Replaces fixed sm:grid-cols-2 breakpoint with fluid auto-fit grid using minmax(min(100%, 16rem), 1fr); affects both MCP and Skills views which share this component.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[McpServerIcon] --> B{iconKey provided?}
    B -- No --> F[Server fallback\nsize-5 text-foreground-muted]
    B -- Yes --> C{getIcon lookup}
    C -- svg --> D[prepareInlineSvgMarkup\nstrips width/height attrs\nadds h-full w-full]
    C -- png --> E[img size-5\nobject-contain]
    C -- not found --> F
    D --> G[div.size-5\ndangerouslySetInnerHTML]
    E --> H[img element]
    G --> I[Container\nflex size-10 shrink-0\nitems-center justify-center\nrounded-lg bg-background-2]
    H --> I
    F --> I
    I --> J[McpCard renders icon\nalongside name + transport badge\n+ provider icons capped at 5]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[McpServerIcon] --> B{iconKey provided?}
    B -- No --> F[Server fallback\nsize-5 text-foreground-muted]
    B -- Yes --> C{getIcon lookup}
    C -- svg --> D[prepareInlineSvgMarkup\nstrips width/height attrs\nadds h-full w-full]
    C -- png --> E[img size-5\nobject-contain]
    C -- not found --> F
    D --> G[div.size-5\ndangerouslySetInnerHTML]
    E --> H[img element]
    G --> I[Container\nflex size-10 shrink-0\nitems-center justify-center\nrounded-lg bg-background-2]
    H --> I
    F --> I
    I --> J[McpCard renders icon\nalongside name + transport badge\n+ provider icons capped at 5]

Loading

_{Reviews (1): Last reviewed commit: "feat(mcp): improve MCP card provider ove..." | Re-trigger Greptile}