Repository navigation
fix(ui): keep scrollbar thumbs one width with a minimum length - #1069
Merged
Merged
Conversation
The thumbs grew from 8px to 12px under the pointer, were fully rounded, and in a long document the preview's shrank to a dot (#1063). Both now follow Monaco's own slider: one width at rest and under the pointer, with hover and drag only darkening the color, and a minimum length. - Width: 12px on the existing 14px track, today's hover width, so the grab area never shrinks. The rest color stays rgba(120,120,120,0.35); VS Code ships a 14px thumb at about 0.4 alpha. - Corner: 4px, Fluent's ControlCornerRadius / borderRadiusMedium (@fluentui/tokens), not a pill at 12px. - Minimum length: 20px, Monaco's MINIMUM_SLIDER_SIZE (monaco-editor 0.55.1, base/browser/ui/scrollbar/scrollbarState.js). It is a constant, not an editor option, so the preview uses the same number: min-height 22px on ::-webkit-scrollbar-thumb is 20px inside the 1px transparent border. WebKit honors it (15px without it); Chromium already keeps its thumb at 24px visible, so there it changes nothing. - Hover: Monaco's slider only swaps scrollbarSlider.background for hoverBackground/activeBackground. The width overrides that grew the editor's slider are removed rather than adjusted.
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.
Closes #1063. The scrollbar thumbs grew from 8px to 12px under the pointer, were fully rounded, and in a long document the preview's shrank to a dot.
Both thumbs now follow Monaco's own slider instead of the issue's exact numbers:
borderRadiusMedium, instead of a pill.MINIMUM_SLIDER_SIZE. It is a constant, not an option, so the preview uses the same number throughmin-heighton::-webkit-scrollbar-thumb. WebKit honours it (the thumb is 15px without it). Chromium already keeps its thumb at 24px, so on WebView2 the preview's minimum is 24px against the editor's 20px.Verified:
npm run check,npm run lint, both test suites,cargo test --locked, fmt and clippy pass. Measured in Chromium (editor and preview, rest and hover: 12px wide, 4px corner, width unchanged on hover) and in an offscreen WKWebView (preview: 12px, 20px minimum). Not checked: hover colour in WebKit, and real WebView2 on Windows.