fix: ensure last sidebar item is visible when scrolling

[SimoHypers]

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:

• Added sm:sticky positioning to keep sidebar in viewport
• Added sm:top-16 to position below navbar
• Set sm:max-h-[calc(100vh-6.5rem)] to constrain height accounting for navbar
• Changed to sm:overflow-y-auto for vertical scrolling

Validation

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:

• ✅ Verified last item "Collecting code coverage in Node.js" is now visible when scrolling sidebar to bottom
• ✅ Tested on Firefox 146.0.1 (where issue was originally reported)
• ✅ Tested on Chrome
• ✅ Verified with security banner present (as mentioned in original issue)

File changed: packages/ui-components/src/Containers/Sidebar/index.module.css

Related Issues

Fixes #8521

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
nodejs-org	Ready	Preview	Jan 7, 2026 0:26am

[github-actions]

👋 Codeowner Review Request

The 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! 🙏

[ovflowd]

There's an interesting artifact where the scrollbar ends before the end of the container? Probaby the fix should slightly different?

[danielpza]

nitpick: you might want to leave a comment explaining what the 6.5rem value means (eg header height)

[danielpza]

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.

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.

[ovflowd]

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.

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]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.66%. Comparing base (914daa3) to head (b024eb6).
⚠️ Report is 27 commits behind head on main.
✅ All tests successful. No failed tests found.

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.
📢 Have feedback on the report? Share it here.

[avivkeller]

Bump!

[malav2110]

Thought: Instead of hardcoding 6.5rem, could we derive the offset from an existing CSS variable - var(--header-height), so it adapts when the security banner or header height changes? Happy to create a small follow-up PR if this makes sense.

[ovflowd]

Thought: Instead of hardcoding 6.5rem, could we derive the offset from an existing CSS variable - var(--header-height), so it adapts when the security banner or header height changes? Happy to create a small follow-up PR if this makes sense.

@malav2110 I believe the author has abandoned the PR, feel free to work on this if you have capacity :)

[malav2110]

Got it, thanks @ovflowd :)