Fix cramped spacing in MCP install card header

[RhysSullivan]

The "Connect an agent" card (McpInstallCard) crowded its divider border and code block against the surrounding content.

Two spacing issues in the header/body:

• The header used pt-4 pb-1, so the subtitle sat only ~4px above the divider border, while the title had ~17px above it. Unbalanced.
• The body used pt-1, leaving the code block jammed ~4px below that divider.

Fix (two one-class edits in mcp-install-card.tsx):

• Header pt-4 pb-1 -> py-4: equal ~16px above the title and below the subtitle.
• Body pt-1 -> pt-3: the code block now sits ~13px below the divider instead of ~4px.

The shared CodeBlock component is intentionally untouched; this is purely the card layout.

Before

After

[greptile-apps]

Greptile Summary

Fixes cramped spacing in the McpInstallCard component by adjusting two Tailwind padding classes — the header now uses balanced vertical padding and the body code block gets more breathing room below the divider.

• Header pt-4 pb-1 → py-4: equalises top and bottom padding (~16px each) so the subtitle no longer sits almost flush against the divider.
• Body pt-1 → pt-3: increases the gap between the divider and the CodeBlock from ~4px to ~12px.

Confidence Score: 5/5

Two isolated Tailwind class swaps with no logic, state, or API surface changes — safe to merge.

Both edits are purely cosmetic padding adjustments inside a single component. No component API, data flow, or behaviour is touched.

No files require special attention.

Important Files Changed

Filename	Overview
packages/react/src/components/mcp-install-card.tsx	Two Tailwind spacing fixes: header pt-4 pb-1 → py-4 for balanced padding, and body pt-1 → pt-3 for more breathing room above the CodeBlock.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[McpInstallCard] --> B[CardStackHeader\nclassName: items-start py-4]
    B --> C[Title: Connect an agent]
    B --> D[Subtitle]
    B --> E[rightSlot: TabsList if showStdio]
    A --> F[Divider]
    A --> G[CardStackContent]
    G --> H[div.px-4.pt-3.pb-3\nwas: pt-1]
    H --> I[CodeBlock bash command]

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[McpInstallCard] --> B[CardStackHeader\nclassName: items-start py-4]
    B --> C[Title: Connect an agent]
    B --> D[Subtitle]
    B --> E[rightSlot: TabsList if showStdio]
    A --> F[Divider]
    A --> G[CardStackContent]
    G --> H[div.px-4.pt-3.pb-3\nwas: pt-1]
    H --> I[CodeBlock bash command]

Loading

_{Reviews (1): Last reviewed commit: "Fix cramped spacing in MCP install card ..." | Re-trigger Greptile}

[greptile-apps]

Since pt-3 and pb-3 are now equal, they can be collapsed into the py-3 shorthand — consistent with how the header was just simplified from pt-4 pb-1 to py-4.

Suggested change

	<div className="px-4 pt-3 pb-3">
	<div className="px-4 py-3">

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[github-actions]

Cloudflare preview

Torn down — the PR is closed.