fix: ensure last sidebar item is visible when scrolling #8522
Conversation
Fixes nodejs#8521 - Added sticky positioning to sidebar - Constrained max-height to account for navbar height - Enables proper scrolling without cutting off last items
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
There's an interesting artifact where the scrollbar ends before the end of the container? Probaby the fix should slightly different? |
| sm:overflow-auto | ||
| sm:sticky | ||
| sm:top-16 | ||
| sm:max-h-[calc(100vh-6.5rem)] |
There was a problem hiding this comment.
nitpick: you might want to leave a comment explaining what the 6.5rem value means (eg header height)
Might fall outside of this PR, but notice in the original issue there's also the occasional security release banner which makes this extra top bar height variable. |
Yeah, I don't think adding a fixed 6.5rem is a valid solution; that is hacky, and I'm pretty sure this can be fixed in a different manner. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8522 +/- ##
==========================================
+ Coverage 74.65% 74.66% +0.01%
==========================================
Files 102 102
Lines 8956 8956
Branches 306 306
==========================================
+ Hits 6686 6687 +1
+ Misses 2268 2267 -1
Partials 2 2 ☔ View full report in Codecov by Sentry. |
3 participants
Description
Fixed the sidebar scrolling issue where the last item ("Collecting code coverage in Node.js") was not visible unless the entire page was scrolled down.
The sidebar now uses sticky positioning with a proper max-height calculation that accounts for the navbar height, allowing users to scroll within the sidebar independently of the page content and see all items.
Changes made:
sm:stickypositioning to keep sidebar in viewportsm:top-16to position below navbarsm:max-h-[calc(100vh-6.5rem)]to constrain height accounting for navbarsm:overflow-y-autofor vertical scrollingValidation
Before: Last sidebar items were cut off when scrolling within the sidebar. Users had to scroll the entire page content to reveal them.
After: All sidebar items are now visible when scrolling within the sidebar itself, independent of page scroll position.
Testing performed:
File changed:
packages/ui-components/src/Containers/Sidebar/index.module.cssRelated Issues
Fixes #8521
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.