From d0cd9d83a7822bf2ebab56229dc7bee12ffa9ca0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 10:16:18 +0000
Subject: [PATCH] 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
---
 src/pages/Terminal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Terminal.tsx b/src/pages/Terminal.tsx
index 7279d20..30f1563 100644
--- a/src/pages/Terminal.tsx
+++ b/src/pages/Terminal.tsx
@@ -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)',