feat: responsive tab width — shrink tabs to fit window

Tabs now dynamically reduce their max-width when the total width exceeds
the TabBar container, similar to browser tab behavior. Uses a
ResizeObserver on the tab area to calculate per-tab max-width as
min(360, containerWidth / tabCount), floored at 60px minimum.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Test
2026-03-02 11:57:26 +01:00
parent cadb3500f1
commit 276b3c1a37
5 changed files with 113 additions and 26 deletions

5
src/utils/tabLayout.ts Normal file
View File

@@ -0,0 +1,5 @@
/** Compute per-tab max-width so all tabs fit within the container. */
export function computeTabMaxWidth(containerWidth: number, tabCount: number): number {
if (tabCount === 0) return 360
return Math.max(60, Math.min(360, Math.floor(containerWidth / tabCount)))
}