From 5fcee8957aa43af67e7675b8def3f640d4200b54 Mon Sep 17 00:00:00 2001
From: Dan Shapiro <3732858+danshapiro@users.noreply.github.com>
Date: Fri, 31 Jul 2026 23:44:19 -0700
Subject: [PATCH] feat(tabs): uniform responsive tab widths (180px cap, equal
 shrink)

Give every tab in the tab bar a uniform, responsive width instead of
content-driven sizing with a hard 5rem title cap:

- TabBar: each sortable tab wrapper gets w-[180px] min-w-[100px] shrink,
  so tabs are 180px when space allows and shrink equally to a 100px
  floor before the strip scrolls (single-row and multirow modes). The
  DragOverlay preview wrapper gets w-[180px] to match.
- TabItem: tab root is w-full min-w-0; title span uses flex-1 min-w-0
  truncate (close button pinned to the right edge); icons, status dot,
  and close button are shrink-0; rename input uses flex-1 min-w-0.
- Tests: title-width-class test asserts the new flexible classes.

Verified: 121 tests pass across TabItem, TabBar, overflow, multirow,
a11y, and mobile suites.

Generated with Amplifier

Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
---
 src/components/TabBar.tsx                    | 11 ++++++++++-
 src/components/TabItem.tsx                   | 12 ++++++------
 test/unit/client/components/TabItem.test.tsx | 10 +++++++---
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index d262b05d8..52871d27d 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -121,7 +121,15 @@ function SortableTab({
   )
 
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      // Uniform tab width: 180px when space allows, shrinking equally
+      // (never below 100px) before the strip starts scrolling.
+      className="w-[180px] min-w-[100px] shrink"
+    >
       <TabItem
         tab={tabWithDisplayTitle}
         isActive={isActive}
@@ -585,6 +593,7 @@ export default function TabBar({ sidebarCollapsed, onToggleSidebar }: TabBarProp
         <DragOverlay>
           {activeTab ? (
             <div
+              className="w-[180px]"
               style={{
                 opacity: 0.9,
                 transform: 'scale(1.02)',
diff --git a/src/components/TabItem.tsx b/src/components/TabItem.tsx
index b44dd39e8..960de325f 100644
--- a/src/components/TabItem.tsx
+++ b/src/components/TabItem.tsx
@@ -21,7 +21,7 @@ function StatusDot({ status, busy }: { status: TerminalStatus; busy?: boolean })
   // `busy` is already the authoritative per-pane busy aggregate (busyPaneIds);
   // do NOT AND it with the last-writer-wins tab.status, which a sibling pane's
   // 'exited' can clobber and wrongly suppress blue.
-  return <Circle className={cn('h-2 w-2', busy ? 'fill-blue-500 text-blue-500' : getTerminalStatusDotClassName(status))} />
+  return <Circle className={cn('h-2 w-2 shrink-0', busy ? 'fill-blue-500 text-blue-500' : getTerminalStatusDotClassName(status))} />
 }
 
 /** Max pane-type icons shown per tab; panes beyond this fold into the '+N' badge. */
@@ -126,7 +126,7 @@ export default function TabItem({
     )
 
     return (
-      <span className="flex items-center gap-0.5">
+      <span className="flex shrink-0 items-center gap-0.5">
         {groups.map((group) => (
           <span key={group.key} className="flex items-center gap-0.5">
             {group.info && repoIconKeys.has(group.key) && (
@@ -158,7 +158,7 @@ export default function TabItem({
   const tabContent = (
     <div
       className={cn(
-        'group relative flex items-center gap-2 h-8 px-3 rounded-t-md border-x border-t border-muted-foreground/45 text-sm cursor-pointer transition-colors',
+        'group relative flex w-full min-w-0 items-center gap-2 h-8 px-3 rounded-t-md border-x border-t border-muted-foreground/45 text-sm cursor-pointer transition-colors',
         isActive
           ? cn(
               "z-30 border-b border-b-background bg-background text-foreground after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-px after:h-[2px] after:bg-background after:content-['']",
@@ -201,7 +201,7 @@ export default function TabItem({
       {isRenaming ? (
         <input
           ref={inputRef}
-          className="bg-transparent outline-none w-32 text-sm"
+          className="bg-transparent outline-none flex-1 min-w-0 text-sm"
           value={renameValue}
           onChange={(e) => onRenameChange(e.target.value)}
           onBlur={onRenameBlur}
@@ -209,14 +209,14 @@ export default function TabItem({
           onClick={(e) => e.stopPropagation()}
         />
       ) : (
-        <span className="whitespace-nowrap truncate text-sm max-w-[5rem]">
+        <span className="flex-1 min-w-0 whitespace-nowrap truncate text-sm">
           {tab.title}
         </span>
       )}
 
       <button
         className={cn(
-          'ml-0.5 p-0.5 min-h-11 min-w-11 md:min-h-0 md:min-w-0 flex items-center justify-center rounded transition-opacity',
+          'ml-0.5 p-0.5 min-h-11 min-w-11 md:min-h-0 md:min-w-0 flex shrink-0 items-center justify-center rounded transition-opacity',
           isActive
             ? 'opacity-60 hover:opacity-100'
             : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
diff --git a/test/unit/client/components/TabItem.test.tsx b/test/unit/client/components/TabItem.test.tsx
index 71ddf89f5..ff7ccee78 100644
--- a/test/unit/client/components/TabItem.test.tsx
+++ b/test/unit/client/components/TabItem.test.tsx
@@ -336,14 +336,18 @@ describe('TabItem', () => {
     expect(onDoubleClick).toHaveBeenCalled()
   })
 
-  it('uses the same title width class for active and inactive tabs', () => {
+  it('uses the same flexible title width classes for active and inactive tabs', () => {
     const { rerender } = render(<TabItem {...defaultProps} isActive={false} />)
     let title = screen.getByText('Test Tab')
-    expect(title.className).toContain('max-w-[5rem]')
+    expect(title.className).toContain('flex-1')
+    expect(title.className).toContain('min-w-0')
+    expect(title.className).toContain('truncate')
 
     rerender(<TabItem {...defaultProps} isActive={true} />)
     title = screen.getByText('Test Tab')
-    expect(title.className).toContain('max-w-[5rem]')
+    expect(title.className).toContain('flex-1')
+    expect(title.className).toContain('min-w-0')
+    expect(title.className).toContain('truncate')
   })
 
   it('does not vertically offset inactive tabs', () => {