Current Behavior
The TOC/Tags sidebar (.td-sidebar-toc) has its own scrollbar that overlaps the browser's native scrollbar near the top-right corner of the page.
When both scrollbars are scrolled to the very top, they occupy the same horizontal space rather than sitting side-by-side — only one scrollbar's top edge renders visibly, while the other's top is hidden underneath it. This confirms it's a direct pixel-level overlap (one drawn over the other), not just two scrollbars running closely in parallel.
Confirmed via DevTools that .td-sidebar-toc uses:
position: sticky;
top: 5.5rem;
height: calc(100vh - 5.5rem);
overflow-y: auto;
This creates an independently-scrolling container whose scrollbar renders right next to the browser's native scrollbar, causing them to visually collide.
This appears to be a site-wide issue, since .td-sidebar-toc is a shared class — confirmed on both the Kanvas docs page and the Cloud docs page.
Expected Behavior
The sidebar's scrollbar should have enough spacing from the edge (e.g. via padding-right or margin-right adjustments on .td-sidebar-toc) so it doesn't visually collide with the browser's native scrollbar.
Screenshots/Logs
Environment
Host OS: Mac
Browser: Chrome
To Reproduce
- Go to any Layer5 docs page with a long "On this page"/Tags sidebar (e.g. docs.layer5.io/kanvas, docs.layer5.io/cloud)
- Look at the top-right corner of the page
- Observe the sidebar's own scrollbar overlapping the browser's native scrollbar
Current Behavior
The TOC/Tags sidebar (
.td-sidebar-toc) has its own scrollbar that overlaps the browser's native scrollbar near the top-right corner of the page.When both scrollbars are scrolled to the very top, they occupy the same horizontal space rather than sitting side-by-side — only one scrollbar's top edge renders visibly, while the other's top is hidden underneath it. This confirms it's a direct pixel-level overlap (one drawn over the other), not just two scrollbars running closely in parallel.
Confirmed via DevTools that
.td-sidebar-tocuses:This creates an independently-scrolling container whose scrollbar renders right next to the browser's native scrollbar, causing them to visually collide.
This appears to be a site-wide issue, since
.td-sidebar-tocis a shared class — confirmed on both the Kanvas docs page and the Cloud docs page.Expected Behavior
The sidebar's scrollbar should have enough spacing from the edge (e.g. via padding-right or margin-right adjustments on
.td-sidebar-toc) so it doesn't visually collide with the browser's native scrollbar.Screenshots/Logs
Environment
Host OS: Mac
Browser: Chrome
To Reproduce