fix(ui): Sidebar scroll not showing last element

[malav2110]

Description

Fixed the Sidebar scrolling issue where last item was not visible

Validation

Before:

Before.mov

After:

After.mov

Related Issues

Fixes: #8521
Closes: #8522

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	Actions	Updated (UTC)
nodejs-org	Ready	Preview	Mar 4, 2026 5:02am

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

[Copilot]

Pull request overview

Updates the article sidebar container styling to ensure the sidebar can scroll fully and the last navigation item remains visible within the viewport.

Changes:

• Adjusted the article sidebar container from a fixed 100vh height to a max-height that subtracts the header height CSS variable.
• Bumped @node-core/ui-components package version from 1.5.7 to 1.5.8.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/ui-components/src/Containers/Article/index.module.css	Constrains the sticky sidebar’s scrollable height to the visible viewport area (accounting for header height).
packages/ui-components/package.json	Patch version bump for the UI components package.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ovflowd]

@malav2110 there's an odd effect here:

Screencast_20260126_144928.webm

There's a weird effect where the sidebar is not full width.

This is how's supposed to look:

This is how it looks now in certain scroll positions:

[malav2110]

@ovflowd Thanks for the video. I want to make sure I’m looking at the right things.

1. In the clip, are you referring to the padding at the bottom of the sidebar, or the horizontal bar that appears near the bottom? If it’s the latter, that section is the LTS / Current / social links block, which I understand to be separate from the sidebar items — but happy to confirm if I’m mistaken.

2. For the sidebar not staying full width, I’m not entirely sure which visual change you’re pointing to in the screenshots. A quick pointer to the specific area or box highlight would really help me focus on the right fix.

[ovflowd]

In the clip, are you referring to the padding at the bottom of the sidebar, or the horizontal bar that appears near the bottom? If it’s the latter, that section is the LTS / Current / social links block, which I understand to be separate from the sidebar items — but happy to confirm if I’m mistaken.

Not really, what I'm referring is the Sidebar is not full width, the Sidebar should go all the way to the bottom bar (not the footer), but the bar that has the breadcrumbs.

[ovflowd]

This is what Im referring to, the Sidebar should be occupying this area

[malav2110]

Ah, got it. I see the gap you’re referring to now. I’ll fix this.

[ovflowd]

@malav2110 with the current code now the issue is at the beginning of the sidebar ;)

[malav2110]

Sharp eyes :) . I’ll address the top offset issue and make sure all scroll states are covered before the next push.

[ovflowd]

Padding could probably be a bit smaller.

[malav2110]

With pb-14, the last item on the list is barely visible thus added pb-16.

[ovflowd]

Is that really the case? This is how much padding I see

[ovflowd]

You're probably referring to the padding when the footer isn't visible.

So this is probably not the place you want to change the padding.

[ovflowd]

For example, if you see the beginning of the sidebar has the same margins/paddings no matter if the header is visible or not

But the same isn't truthy for the end of the sidebar:

So this means this place is probably not the right one to add padding. Or it must be a mix of two different places.

[ovflowd]

(I would recommend to avoid making assumptions, if I tell you it is possible or something the contrary, then I'm pretty sure it is possible 😛)

[ovflowd]

(I just want to avoid giving you a solution plated, so you can try it yourself 👀)

[malav2110]

Got it. Thanks for the examples and for calling that out. That helps reset my assumptions.

Appreciate you pushing me to think it through rather than handing me the solution 🙂

[ovflowd]

Absolutely! Although, I know I used a bit of a strong tone, apologies for that. Let me know if you get stuck and need support tho 🙇

[malav2110]

Thanks, appreciate that 🙂
I pushed a fix with reduced padding to address the issue that started the thread, and also resolved the merge conflict. Curious to hear your thoughts.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.95%. Comparing base (097cac6) to head (04b5378).
⚠️ Report is 4 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8563      +/-   ##
==========================================
- Coverage   75.03%   74.95%   -0.09%     
==========================================
  Files         103      103              
  Lines        9062     9063       +1     
  Branches      312      312              
==========================================
- Hits         6800     6793       -7     
- Misses       2260     2268       +8     
  Partials        2        2              

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

[github-actions]

Note

Your Pull Request seems to be updating Translations of the Node.js Website.

Whilst we appreciate your intent; Any Translation update should be done through our Crowdin Project.
We recommend giving a read on our Translation Guidelines.

Thank you!

[malav2110]

Seems like I have messed up with the rebase process. Closing this and starting fresh.