fix(scrollbar): Fix weird scrollbar issue on onboard page#1116
Open
plind-junior wants to merge 2 commits into
Open
fix(scrollbar): Fix weird scrollbar issue on onboard page#1116plind-junior wants to merge 2 commits into
plind-junior wants to merge 2 commits into
Conversation
1e94b86 to
4038f08
Compare
4038f08 to
8922ccb
Compare
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.
Summary
On the Bounties page (and intermittently elsewhere), the browser's default light/system scrollbar would appear when scrolling — most reliably reproducible by applying a filter and then scrolling up and down. The dark theme scrollbar from
scrollbarSxwas only being applied to specific containers, so any other scroll context (the body itself, or a transient overflow context after a filter resize) fell back to the OS default.This PR adds a global
::-webkit-scrollbar+ Firefoxscrollbar-colorbaseline insrc/index.cssso every scrollable element on the page picks up the dark theme automatically.Cause
scrollbarSx(src/theme.ts:82) is an MUIsxsnippet that styles the scrollbar of the element it's attached to. Components have to opt in. Today only a handful of containers do —<main>in AppLayout.tsx:154, DataTable'sTableContainer, the global search results dropdown, etc.When filtering on
/bountiescauses the result count (and therefore page height) to shrink, the scroll context can briefly move from<main>to the body for a frame, and the body's scrollbar isn't styled — producing the visible "default scrollbar appearing" flash.Related prior work
This is complementary to past per-container fixes — none of which targeted the global stylesheet:
scrollbarSxand applied it to ~12 componentsscrollbarSxto AppLayout's<main>and 16 other containersTest plan
/bounties, apply a filter (e.g. "Available"), scroll up and down — no white/native scrollbar appears.<main>, DataTable, and the global search results dropdown are visually unchanged.scrollbar-color.Out of scope
Not changing any per-container
scrollbarSxusage — those keep working and are kept for explicit intent on specific scroll regions.Before
scroll.issue.mp4