Skip to content

fix(scrollbar): Fix weird scrollbar issue on onboard page#1116

Open
plind-junior wants to merge 2 commits into
entrius:testfrom
plind-junior:fix/global-scrollbar-styling
Open

fix(scrollbar): Fix weird scrollbar issue on onboard page#1116
plind-junior wants to merge 2 commits into
entrius:testfrom
plind-junior:fix/global-scrollbar-styling

Conversation

@plind-junior
Copy link
Copy Markdown
Contributor

@plind-junior plind-junior commented May 13, 2026

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 scrollbarSx was 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 + Firefox scrollbar-color baseline in src/index.css so every scrollable element on the page picks up the dark theme automatically.

Cause

scrollbarSx (src/theme.ts:82) is an MUI sx snippet 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's TableContainer, the global search results dropdown, etc.

When filtering on /bounties causes 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:

Test plan

  • Open /bounties, apply a filter (e.g. "Available"), scroll up and down — no white/native scrollbar appears.
  • Repeat on Watchlist, Repositories, Top Miners — scrollbar styling is consistent.
  • Sanity: existing scrollbars on <main>, DataTable, and the global search results dropdown are visually unchanged.
  • Firefox: scrollbar shows the thin dark variant via scrollbar-color.

Out of scope

Not changing any per-container scrollbarSx usage — those keep working and are kept for explicit intent on specific scroll regions.

Before

scroll.issue.mp4

@xiao-xiao-mao xiao-xiao-mao Bot added the bug Something isn't working label May 13, 2026
@plind-junior plind-junior deleted the fix/global-scrollbar-styling branch May 13, 2026 14:11
@plind-junior plind-junior restored the fix/global-scrollbar-styling branch May 13, 2026 14:14
@plind-junior plind-junior reopened this May 13, 2026
@plind-junior plind-junior force-pushed the fix/global-scrollbar-styling branch from 1e94b86 to 4038f08 Compare May 13, 2026 14:15
@plind-junior plind-junior changed the title fix(scrollbar): apply dark scrollbar globally to prevent native fallback fix(scrollbar): Fix weird scrollbar issue on onboard page May 13, 2026
@plind-junior plind-junior force-pushed the fix/global-scrollbar-styling branch from 4038f08 to 8922ccb Compare May 13, 2026 14:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant