feat(tabs): uniform responsive tab widths (180px cap, equal shrink) - #596
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Tabs in the tab bar now have a uniform, responsive width instead of content-driven sizing with a hard 5rem title cap:
w-[180px] min-w-[100px] shrink— tabs render at 180px when space allows and shrink equally down to a 100px floor before the strip starts scrolling. Applies in both single-row and multirow modes. TheDragOverlaypreview wrapper getsw-[180px]to match.w-full min-w-0; the title span changed frommax-w-[5rem]toflex-1 min-w-0 truncate, pinning the close button to the right edge; icons, status dot, and close button areshrink-0; the rename input changed fromw-32toflex-1 min-w-0.Why
Previously tab widths varied with content and titles were capped at 5rem, producing ragged, inconsistent tabs. Uniform widths with equal shrink give a predictable, browser-like tab strip.
How verified
121 tests pass across the TabItem, TabBar, overflow, multirow, a11y, and mobile suites:
The
TabItemtitle-width-class test was updated to assert the new flexible classes (flex-1 min-w-0 truncate) instead ofmax-w-[5rem].Breaking changes
None — visual/layout change only.
Generated with Amplifier
Co-Authored-By: Amplifier 240397093+microsoft-amplifier@users.noreply.github.com