The 'Connect an agent' card jammed its divider border and code block against the surrounding content: the header used pt-4 pb-1, so the subtitle sat only 4px above the divider, and the body used pt-1, leaving the code block ~4px below it. Balance the header (py-4, equal 16px top and bottom) and give the code block room below the divider (pt-1 to pt-3).
Unified · Split
| @@ -240,7 +240,7 @@ export function McpInstallCard(props: { className?: string }) { · 239 unmodified lines | |||
| 240 | 240 | ||
| 241 | const header = ( | 241 | const header = ( |
| 242 | <CardStackHeader | 242 | <CardStackHeader |
| 243 | className="items-start pt-4 pb-1" | 243 | className="items-start py-4" |
| 244 | rightSlot={ | 244 | rightSlot={ |
| 245 | showStdio ? ( | 245 | showStdio ? ( |
| 246 | <TabsList> | 246 | <TabsList> |
| @@ -259,7 +259,7 @@ export function McpInstallCard(props: { className?: string }) { · 12 unmodified lines | |||
| 259 | 259 | ||
| 260 | const body = ( | 260 | const body = ( |
| 261 | <CardStackContent> | 261 | <CardStackContent> |
| 262 | <div className="px-4 pt-1 pb-3"> | 262 | <div className="px-4 pt-3 pb-3"> |
| 263 | <CodeBlock | 263 | <CodeBlock |
| 264 | code={command} | 264 | code={command} |
| 265 | lang="bash" | 265 | lang="bash" |