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 | 241 | const header = ( |
| 242 | 242 | <CardStackHeader |
| 243 | − className="items-start pt-4 pb-1" | |
| 243 | + className="items-start py-4" | |
| 244 | 244 | rightSlot={ |
| 245 | 245 | showStdio ? ( |
| 246 | 246 | <TabsList> |
| @@ -259,7 +259,7 @@ export function McpInstallCard(props: { className?: string }) { · 12 unmodified lines | ||
| 259 | 259 | |
| 260 | 260 | const body = ( |
| 261 | 261 | <CardStackContent> |
| 262 | − <div className="px-4 pt-1 pb-3"> | |
| 262 | + <div className="px-4 pt-3 pb-3"> | |
| 263 | 263 | <CodeBlock |
| 264 | 264 | code={command} |
| 265 | 265 | lang="bash" |