fix(tabs): cap tab widths with intrinsic CSS sizing (#37131)

This commit is contained in:
Jinjing
2026-11-01 12:52:07 -07:00
committed by GitHub
parent 9eb930173e
commit ef79fa1693
3 changed files with 6 additions and 5 deletions
@@ -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')
@@ -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
@@ -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'