Repository navigation
Conversation
Base UI's ScrollArea viewport sets `overflow: scroll` and hides the native scrollbars only with a <style> that React hoists into <head> once per document. Astro's ClientRouter removes that style on every soft navigation and React never re-inserts it, so the docs site showed empty scrollbar tracks along the LayerDialog body wherever scrollbars are always visible. - Give the LayerDialog body and Sidebar content viewports Kumo's own `no-scrollbar` rule so they no longer depend on the injected style. - Keep React-hoisted styles across ClientRouter swaps on the docs site.
|
This pull request was not reviewed automatically because its author does not have write access to this repository. A maintainer with write access can start a review by commenting |
commit: |
Contributor
Docs PreviewCommit: |
Contributor
Visual contractsLinux Chromium references exercised by the PR's 1 curated contracttruncating text trigger
|
Contributor
📐 Bundle SizeConsumer fixtures bundled against
npm tarball: 564 files, 1.56 MB packed, 7.30 MB unpacked.
|
Contributor
Author
|
clanky review |
With LayerDialog and Sidebar hiding native scrollbars through Kumo's own CSS, nothing on the docs site needs Base UI's injected style anymore. The workaround leaned on undocumented Astro head-swap behavior, and leaving the site as-is keeps it exposing the problem if another component starts depending on that style.
nandanmen
approved these changes
Oct 27, 2026
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.
On kumo-ui.com, the LayerDialog body shows empty grey scrollbar tracks along its right and bottom edges when scrollbars are set to always show (macOS "Show scroll bars: Always" or with a mouse attached, Windows, Linux). Sidebar.Content has the same problem.
Before and after
Both shots use the same steps in Chrome with always-visible scrollbars: open the "Choose a Worker" demo, leave the page through the sidebar, come back, and open it again.
Cause
Base UI's
ScrollArea.Viewportsetsoverflow: scrolland hides the native scrollbars only through a<style>that React hoists into<head>once per document. The docs site's Astro<ClientRouter />removes every<head>style the incoming page doesn't ship, and React never re-inserts a hoisted style it has already inserted. So after any soft navigation the rule is gone and the native tracks appear. A hard refresh hides them until the next navigation.Outside the docs site, any app that swaps
<head>or blocks inline styles with a CSP would hit the same thing. In Kumo, only LayerDialog and Sidebar depend on that style. Base UI also uses it for Select's scroll arrows, which Kumo doesn't render.Changes
LayerDialog.BodyandSidebar.Contentviewports also get Kumo's existingno-scrollbarutility, so they no longer depend on Base UI's injected style.The docs site is unchanged on purpose. With this fix nothing there needs Base UI's style anymore, and leaving the site as-is means it would still surface the problem if another component ever depends on that style.
Testing
<head>, and the native scrollbars take 15px on each axis. After: the style is still removed, but the scrollbars take 0px.tsc --noEmit(kumo): 0 errors.vp lintandvp fmt --checkon the changed files: clean.