From e22023f8978b37d7d21f38d3eb49bd90ee6df97b Mon Sep 17 00:00:00 2001
From: brennanb2025 <brennankbenson@gmail.com>
Date: Fri, 1 May 2026 12:32:23 -0700
Subject: [PATCH] fix(tabs): shrink tab row to 32px, pad drag strip to 10px

Keep the total top-band at 42px (matching the sidebar's titlebar-left)
while making the tabs themselves 2px shorter, so the tab chrome feels a
touch more compact without breaking alignment with the sidebar header.

Co-authored-by: Orca <help@stably.ai>
---
 .../src/components/tab-group/TabGroupPanel.tsx      |  2 +-
 .../components/tab-group/TabGroupSplitLayout.tsx    | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/components/tab-group/TabGroupPanel.tsx b/src/renderer/src/components/tab-group/TabGroupPanel.tsx
index b0857bc1498..18c4d0ab814 100644
--- a/src/renderer/src/components/tab-group/TabGroupPanel.tsx
+++ b/src/renderer/src/components/tab-group/TabGroupPanel.tsx
@@ -223,7 +223,7 @@ export default function TabGroupPanel({
           this, the empty space after tabs in the center column is dead — the
           user can only drag from the tiny left-sidebar header strip. */}
       <div
-        className="h-[34px] shrink-0 border-b border-border bg-card"
+        className="h-[32px] shrink-0 border-b border-border bg-card"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       >
         <div className="flex h-full items-stretch pr-1.5">
diff --git a/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx b/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx
index a720675a3dd..52f2ca7ea88 100644
--- a/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx
+++ b/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx
@@ -217,16 +217,15 @@ export default function TabGroupSplitLayout({
       // so disabling it is the simplest fix.
       autoScroll={false}
     >
-      {/* Why: the 8px drag strip sits ABOVE the split layout — lifted out of
+      {/* Why: the 10px drag strip sits ABOVE the split layout — lifted out of
           each pane — so vertical split resize handles don't extend into the
           window-drag region at the top. Only the split layout's own panes
           own the resize handles, while this strip keeps the whole top of the
           center column draggable regardless of how the splits are arranged.
-          Why 8px specifically: the 34px tab row below this strip must bring
-          the total top-band to 42px so its bottom border aligns with the
-          sibling `titlebar-left` (also 42px) above the sidebar — otherwise
-          the tab row sits 2px high and the seam between the two columns
-          snags the eye.
+          Why 10px specifically: pairs with the 32px tab row below so the
+          total top-band is 42px, matching the sibling `titlebar-left` above
+          the sidebar. Without this, the tab row's bottom border falls short
+          of the sidebar header's and the seam between columns reads as off.
           Why `border-l` on the wrapper: paint a single full-height divider
           between the left sidebar and the terminal area, regardless of
           split state. When splits exist, the leftmost pane also renders its
@@ -234,7 +233,7 @@ export default function TabGroupSplitLayout({
           overlapping 1px lines read as one clean seam. */}
       <div className="flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden border-l border-border">
         <div
-          className="h-[8px] shrink-0 bg-card"
+          className="h-[10px] shrink-0 bg-card"
           style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
         />
         <div className="flex flex-1 min-w-0 min-h-0 overflow-hidden">