fix: sidebar last items hidden behind header on scroll

[system-conf]

Summary

Fixes #8521

The sidebar navigation clips the last items when scrolled down. The root cause is that the sidebar container uses h-svh (100% of small viewport height) with top-0, but the NavBar sits at the top consuming ~4rem of vertical space. This means the last sidebar items are pushed below the visible viewport area.

Changes

packages/ui-components/src/Containers/Article/index.module.css:

• Changed ml:top-0 → ml:top-[var(--header-height)] — positions sidebar below the header
• Changed ml:h-svh → ml:h-[calc(100svh-var(--header-height))] — sizes sidebar to remaining viewport

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

• Removed ml:pb-[var(--header-height)] — no longer needed since the container now correctly accounts for header height

How to test

1. Navigate to any learn/docs page with a long sidebar (e.g., /en/learn/getting-started/introduction-to-nodejs)
2. Scroll the sidebar to the bottom
3. Verify that all sidebar items are visible and the last items are not clipped
4. Test with and without a banner visible (e.g., security release banner)
5. Test on different screen sizes (mobile, tablet, desktop)

Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
nodejs-org	Ready	Preview	Apr 27, 2026 1:46pm

[cursor]

PR Summary

Low Risk
CSS-only layout tweaks to sticky sidebar sizing/positioning; low risk but could slightly affect scroll behavior and spacing across responsive breakpoints.

Overview
Fixes sidebar scroll clipping by offsetting the sticky sidebar container below the header and reducing its height to the remaining viewport (using var(--header-height) in Article/index.module.css).

Removes the sidebar wrapper’s extra bottom padding (Sidebar/index.module.css) since the sidebar now accounts for header height directly.

^{Reviewed by Cursor Bugbot for commit 473584e. Bugbot is set up for automated code reviews on this repo. Configure here.}

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

[avivkeller]

The code makes sense to me, but I'm not sure if we accept contributions entirely written by Artificial Intelligence, cc @nodejs/web-admins

[MattIPv4]

https://ai-coding-assistants-policy.openjsf.org/ does not restrict how much of a submission is written by AI, just that it must be correctly attributed to AI and not violate license restrictions, and that the human submitter is taking responsibility (the human opened the PR here, not the AI, so that seems like a valid sign).

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.22%. Comparing base (60aeb4b) to head (473584e).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8852      +/-   ##
==========================================
- Coverage   73.23%   73.22%   -0.02%     
==========================================
  Files         102      102              
  Lines        8623     8623              
  Branches      313      313              
==========================================
- Hits         6315     6314       -1     
- Misses       2307     2308       +1     
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.