fix(ui): keep the tab list from scrolling vertically - #500
Merged
Merged
Conversation
The tab list set overflow-x: auto, which also made overflow-y auto. Line tabs overlap the list's bottom border by 1px so the selected underline covers it, but that pixel lay outside the scrollport's padding box. The list therefore had 1px of vertical overflow: a vertical scrollbar could appear, the underline was clipped to 1px, and the focus ring needed a 1px deeper offset to stay visible. The baseline is now an inset shadow above a 1px bottom padding, so the overlap stays inside the scrollport and the list keeps exactly the same size. The list scrolls only sideways (overflow: auto hidden), and the line-tab focus-ring workaround is gone. The two conflicting rule sets (hidden vs. thin scrollbar) are merged into one thin, theme-coloured scrollbar, which is what browsers already rendered. Pill, vertical, and PanelDialog tabs clear the new baseline the same way they cleared the border.
Forced-colors mode drops box-shadow. Since the tab list now draws its baseline as an inset shadow, high-contrast users lost the line after the last tab and kept only the per-tab borders, which the old border-based baseline did not do. The horizontal list opts out of forced colors with its border token set to CanvasText, so the baseline keeps the system text color, and hands its tabs back to forced colors. A gradient background would not help: forced colors drop gradient images too. Pill, vertical, and PanelDialog lists draw no baseline and stay unchanged.
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
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 changes
The
@k2b/uitab list no longer scrolls vertically. Before, a horizontal tab list could show a thin vertical scrollbar next to its tabs, and the selected line tab's underline was cut to 1 px. Now the list scrolls only sideways, the selected underline and the keyboard focus ring stay whole, and the list keeps exactly the same size, so nothing around it moves.In forced-colors (high contrast) mode, the line baseline after the last tab is still drawn, in the system text color.
This answers a request from another Cloud application, where a tab bar showed a stray vertical scrollbar.
Why
.k2b-tabs__listsetoverflow-x: auto, which also makesoverflow-ycompute toauto. Line tabs overlap the list's 1 px bottom border so the selected underline can cover it, but that pixel lay outside the scrollport's padding box. The list therefore had 1 px of vertical overflow: a vertical scrollbar could appear, the underline was clipped, and the focus ring needed a 1 px deeper offset to stay visible. Two rule sets also disagreed on the scrollbar (hidden vs. thin).How
box-shadowabove a 1 px bottom padding instead of a bottom border. The overlap now stays inside the scrollport, and the list keeps the same height.overflow: auto hidden, so it can only scroll sideways. The line-tab focus-ring offset workaround is removed.box-shadow, so the horizontal list opts out of forced colors with its border token set toCanvasTextand hands its tabs back to forced colors. Pill, vertical, and PanelDialog tab lists draw no baseline and clear it the same way they cleared the border.Documentation
docs-site/src/ui/context/actions/tabs.mdnow states that the list scrolls only horizontally, that the selected underline and focus ring stay whole, that the horizontal scrollbar is thin where the platform shows scrollbars, and that forced colors draw the line baseline in the system text color.Verification
packages/ui/src/actions/tabs.browser.test.tsrenders line and pill lists with 3 and 24 tabs in Chromium at 1440 px and at 390 px (phone): computed overflow isauto hidden, vertical overflow is 0, the selected underline is not cut, and only the 24-tab lists scroll sideways. A forced-colors case checks theCanvasTextbaseline on line lists and none on pill lists.mainand from this branch. The bounding boxes of the tabs root, the list, the first tab, and the content after the lists are identical.bun run --cwd packages/ui test: 711 tests pass, packed consumer check passes.bun run check: 18/18 rules pass.git diff --checkis clean.