Force explicit grid gap + clip panes to fix missing row gap in 4-pane view

Use an explicit inline gap instead of relying solely on a dynamically
templated Tailwind class, and clip each pane's content (overflow-hidden)
so a pane can't visually bleed into the row gap below it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019hu9pZvJY4BgmcQeAw2ugk
This commit is contained in:
Claude 2026-06-21 10:16:18 +00:00
parent f191119a28
commit d0cd9d83a7
No known key found for this signature in database

View file

@ -180,7 +180,7 @@ export default function Terminal() {
</div>
)}
<div className={`grid min-h-0 flex-1 gap-3 ${paneGridClass}`}>
<div className={`grid min-h-0 flex-1 ${paneGridClass}`} style={{ gap: '12px', rowGap: '12px', columnGap: '12px' }}>
{activeTab.panes.map((pane) => (
<TerminalPane
key={pane.id}
@ -231,7 +231,7 @@ function TerminalPane({
return (
<div
onClick={onFocus}
className="flex min-w-0 min-h-0 flex-col rounded-lg p-3"
className="flex min-w-0 min-h-0 flex-col overflow-hidden rounded-lg p-3"
style={{
backgroundColor: '#15161A',
border: active ? `1px solid ${GOLD}` : '1px solid rgba(255,255,255,0.1)',