[kumo] Fix horizontal scroll in Sidebar.Content#583
Open
hkfoster wants to merge 1 commit into
Open
Conversation
Always apply overflow-x: hidden on the ScrollArea.Viewport, not just when collapsed. Base UI sets overflow: scroll as an inline style on the viewport, which allowed ~14px of horizontal overflow when consumer content exceeded the sidebar width.
commit: |
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.
Fix horizontal scroll in
Sidebar.ContentProblem
Sidebar.Contentwraps Base UI'sScrollArea. The scroll viewport ([data-sidebar="content"] > div) receivesoverflow: scrollas an inline style from Base UI, and the inner content div getsstyle="min-width: fit-content". Together, these create ~14px of horizontal overflow in sidebar panes, allowing users to scroll horizontally when they shouldn't be able to.This is observable in the Cloudflare dashboard sidebar where consumer content (search buttons with
⌘Kkeyboard shortcuts, shortcut items with pin buttons, etc.) pushes the intrinsic content width slightly beyond the viewport.Root Cause
The existing
overflow-x-hidden!override on the viewport was scoped to collapsed state only (group-data-[state=collapsed]/sidebar:overflow-x-hidden!), leaving horizontal scrolling enabled in the expanded state.Fix
Apply
overflow-x-hidden!unconditionally on theScrollArea.Viewport, sooverflow-x: hidden !importantalways overrides Base UI's inlineoverflow: scrollregardless of sidebar state. TheScrollArea.Scrollbarwas already set toorientation="vertical"and theScrollArea.Contentalready hadmin-w-0!— this change completes the fix.One-line change:
group-data-[state=collapsed]/sidebar:overflow-x-hidden!→overflow-x-hidden!!importantoverride from collapsed-only to all states. Existing sidebar tests (701 passing) cover component behavior. The overflow is caused by Base UI's inline styles interacting with consumer content and cannot be reproduced with Kumo's own sidebar components alone.