From ef79fa1693e997f78abc03551ee917af389df2ce Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 1 Nov 2026 12:52:07 -0700
Subject: [PATCH] fix(tabs): cap tab widths with intrinsic CSS sizing (#37131)

---
 .../src/components/tab-bar/TabBar.context-menu.test.ts       | 5 +++--
 src/renderer/src/components/tab-bar/tab-bar-surface.tsx      | 2 +-
 src/renderer/src/components/tab-bar/tab-width-rules.ts       | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/tab-bar/TabBar.context-menu.test.ts b/src/renderer/src/components/tab-bar/TabBar.context-menu.test.ts
index a7bbf0d61fb..03715948aa2 100644
--- a/src/renderer/src/components/tab-bar/TabBar.context-menu.test.ts
+++ b/src/renderer/src/components/tab-bar/TabBar.context-menu.test.ts
@@ -348,7 +348,7 @@ describe('TabBar context menu wiring', () => {
     expect(sortable[0].props.tabCount).toBe(2)
   })
 
-  it('fills the available tab strip width while allowing horizontal scrolling', async () => {
+  it('sizes the tab strip from its tabs while allowing horizontal scrolling', async () => {
     const element = await renderTabBar({
       tabs: [TERMINAL_TAB],
       editorFiles: [EDITOR_FILE],
@@ -366,7 +366,8 @@ describe('TabBar context menu wiring', () => {
     expect(stripWrapper).toBeTruthy()
     expect(stripWrapper?.props.className).toContain('min-w-0')
     expect(stripWrapper?.props.className).toContain('max-w-full')
-    expect(stripWrapper?.props.className).toContain('flex-1')
+    expect(stripWrapper?.props.className).toContain('w-max')
+    expect(stripWrapper?.props.className).toContain('shrink')
     expect(strip).toBeTruthy()
     expect(strip?.props.className).toContain('min-w-0')
     expect(strip?.props.className).toContain('flex-1')
diff --git a/src/renderer/src/components/tab-bar/tab-bar-surface.tsx b/src/renderer/src/components/tab-bar/tab-bar-surface.tsx
index 34905a6eef9..c49f13020ce 100644
--- a/src/renderer/src/components/tab-bar/tab-bar-surface.tsx
+++ b/src/renderer/src/components/tab-bar/tab-bar-surface.tsx
@@ -146,7 +146,7 @@ export function renderTabBarSurface({
         {/* Why: no-drag lets tab interactions work inside the titlebar's drag region (outer container stays window-draggable). */}
         <div
           data-single-tab={singleTab ? '' : undefined}
-          className="group/tab-strip relative flex min-h-0 min-w-0 max-w-full flex-1"
+          className="group/tab-strip relative flex min-h-0 w-max min-w-0 max-w-full shrink"
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         >
           <div
diff --git a/src/renderer/src/components/tab-bar/tab-width-rules.ts b/src/renderer/src/components/tab-bar/tab-width-rules.ts
index caf5bb41ef8..cc04b49d959 100644
--- a/src/renderer/src/components/tab-bar/tab-width-rules.ts
+++ b/src/renderer/src/components/tab-bar/tab-width-rules.ts
@@ -1,4 +1,4 @@
-// Divide available space independently of titles; overflow only at the readable minimum.
-export const TAB_CONTAINER_WIDTH_CLASSES = 'min-w-[144px] flex-1'
+// Preferred widths size the content-fit strip; tabs share constrained space down to 144px.
+export const TAB_CONTAINER_WIDTH_CLASSES = 'w-[330px] min-w-[144px] flex-1'
 
 export const TAB_LABEL_WIDTH_CLASSES = 'tab-label min-w-0 flex-1 truncate'