Fix the white scrollbar/outline artifacts: theme Chromium's Fluent overlay scrollbars in all islands#89
Merged
Conversation
Qt 6.11's Chromium draws Windows-11 "Fluent" overlay scrollbars - large WHITE rounded pills - on any island surface the moment it overflows: the page itself when a host clamps shorter than its content, inner scroll lists, or a fixed-width shell overflowing the viewport by a sub-pixel at fractional DPI scaling. They auto-hide when idle (why the artifacts came and went) and ignore legacy ::-webkit-scrollbar styling; the standard `scrollbar-color` property is what actually themes them. Verified empirically against this exact engine with on-screen composited pixel sampling: default thumb ~rgb(252) (the white pills the user saw); `color-scheme: dark` alone still ~rgb(160); `scrollbar-color` ~rgb(60). Page transparency itself was confirmed working (composited pixel probe) - the white was never the page background. Fix: a shared lib/ui/base.css - color-scheme: dark + inherited scrollbar-color using the same runtime token island cards already use for borders + scrollbar-width: thin - imported first by every island's styles.css (19 islands). Plus plugin-picker's shell switches from a fixed 520px (exactly the host width - sub-pixel overflow at fractional DPI summoned a horizontal scrollbar across the popup) to width:100%/max-width. Verified: all 19 islands rebuilt; 533 vitest tests pass (including the no-raw-colors guard); the real built plugin-picker bundle probed on screen while scrolling - V-zone brightest 96, H-zone 28, both dark. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The committed prebuilt assets now carry lib/ui/base.css (dark scrollbar-color theming + color-scheme) and plugin-picker's width fix, so a fresh checkout renders correctly without waiting for a local rebuild. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…omposer token-retrofit golden CI caught what my local verification missed (I ran vitest but not the Python suite for a "CSS-only" change): test_composer_token_retrofit.py is a PYTHON golden test that resolves the composer's styles.css against each theme and asserts a byte-for-byte match with a pre-retrofit fixture - the @import line prepended to styles.css broke the byte-match. Same bundle, different plumbing: every island's main.tsx now imports lib/ui/base.css immediately before ./styles.css (identical cascade order, identical vite output), and all 19 styles.css files are byte-identical to main again. Verified: 533 vitest + full Python suite 1678 passed (golden green), islands rebuilt, and the built plugin-picker bundle re-probed on screen mid-scroll - scrollbar zone still dark (88, was 252 before the fix). Co-Authored-By: Claude Fable 5 <noreply@anthropic.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.
Summary
Fixes the white outline/marker artifacts across the UI (plugin-picker popup bars, the right-edge white pill, picker-popup edges, token-counter/composer fringes).
Diagnosis (all verified empirically on this machine with composited-pixel probes):
setBackgroundColor(transparent)composites correctly (probe: background sampledrgb(16,16,16)through the page).::-webkit-scrollbarrules; probes: default thumb brightness 252 (white),color-scheme: darkalone 160,scrollbar-color60 (dark) - the property that actually works.Fix:
web_ui/src/lib/ui/base.css(color-scheme: dark+ inheritedscrollbar-coloron the same runtime token island cards already use for borders +scrollbar-width: thin), imported first by every island'sstyles.css.plugin-pickershell: fixed520px(exactly the host width) →width: 100%; max-width: 520px- the sub-pixel overflow at fractional DPI was summoning the horizontal bar across the popup bottom.Verification