Description
On wide viewports the leaderboard pages show two scrollbars (inner component scrollbar + browser page scrollbar). They have different styling and overlap, producing a visual glitch and confusing scrolling behavior.
Steps to Reproduce
- Run the app (e.g. npm run dev) and open /top-miners or /discoveries on a desktop viewport (XL / wide screen).
- Ensure the right sidebar is visible (split layout).
- Scroll — observe both the thin themed scrollbar (inside the content/sidebar) and the browser page scrollbar at the far right.
Expected Behavior
A single scroll container (or visually consistent scrollbars). Either:
- Let the top-level page ([AppLayout] main) be the only scroll container and remove inner [overflow:auto], or
- Keep inner scrolling but hide/disable the outer page scrollbar — and ensure all scrollbars share the same themed styling.
Actual Behavior
Two visible scrollbars with different looks (the inner scrollbar uses the app theme; the browser scrollbar is the native default). They appear side-by-side/overlap and create a double-scroll effect.
Environment
- Browser: Google Chrome
- OS: Windows 11
Additional Context
Description
On wide viewports the leaderboard pages show two scrollbars (inner component scrollbar + browser page scrollbar). They have different styling and overlap, producing a visual glitch and confusing scrolling behavior.
Steps to Reproduce
Expected Behavior
A single scroll container (or visually consistent scrollbars). Either:
Actual Behavior
Two visible scrollbars with different looks (the inner scrollbar uses the app theme; the browser scrollbar is the native default). They appear side-by-side/overlap and create a double-scroll effect.
Environment
Additional Context