Problem
On Windows, Edge/Chrome show classic always-visible scrollbars on the navigation sidebar and table of contents. These take ~17px of space and look clunky compared to macOS overlay scrollbars.
Affected elements:
- Sidebar navigation (
Layout.svelte)
- Table of contents (
Layout.svelte)
- Mobile drawer (
MobileDrawer.svelte)
- TOC popover (
TocPopover.svelte)
- Breadcrumb dropdown (
Breadcrumbs.svelte)
Solution
Add scrollbar-width: thin and scrollbar-color to all overflow-y-auto secondary panels:
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.2) transparent;
Dark mode:
scrollbar-color: rgba(255,255,255,0.2) transparent;
This is standard practice in modern web apps (GitHub, VS Code, Notion). Supported in Chrome 121+, Firefox 64+, Edge 121+, Safari 18.4+.
Do NOT use ::-webkit-scrollbar — non-standard and being deprecated in Chromium.
Problem
On Windows, Edge/Chrome show classic always-visible scrollbars on the navigation sidebar and table of contents. These take ~17px of space and look clunky compared to macOS overlay scrollbars.
Affected elements:
Layout.svelte)Layout.svelte)MobileDrawer.svelte)TocPopover.svelte)Breadcrumbs.svelte)Solution
Add
scrollbar-width: thinandscrollbar-colorto alloverflow-y-autosecondary panels:Dark mode:
This is standard practice in modern web apps (GitHub, VS Code, Notion). Supported in Chrome 121+, Firefox 64+, Edge 121+, Safari 18.4+.
Do NOT use
::-webkit-scrollbar— non-standard and being deprecated in Chromium.