style: update sidebar item spacing and scrollbar styles

[IslemDjd]

Description

• Improved the Learn page sidebar UI by fixing some previous minor UI issues.
• Styled the website scrollbar to align with the overall website theme colors, ensuring visual consistency and a modern user experience.

Validation

• Manually verified on latest Chrome, Firefox, Edge, Brave, Opera GX—sidebar and scrollbar styles display as intended and respond correctly to interaction.
• Tested at multiple viewport sizes for responsive layout.
• Built site with pnpm build—no errors.
• Ran pnpm test—all tests passed.

before :

After :

Related Issues

• N/A (UI/UX enhancement)

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	Preview	Updated (UTC)
nodejs-org	Ready	Preview	Sep 13, 2025 1:33am

[Copilot]

Pull Request Overview

Enhances the Learn page sidebar UI by improving item spacing and introduces consistent custom scrollbar styling across the website to align with the theme colors.

• Updates sidebar item padding and progression group spacing for better visual hierarchy
• Implements custom scrollbar styling with green theme colors for visual consistency
• Fixes dark mode display issues in progression group connectors

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/ui-components/src/styles/index.css	Adds global custom scrollbar styling with green theme colors
packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css	Adds left padding to sidebar items for improved spacing
packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css	Improves progression group spacing and fixes dark mode connector visibility

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[mikeesto]

Thanks. I think this is an improvement in dark mode but in light mode it still looks a bit wonky

[IslemDjd]

Thanks for your observation , It has been fixed ✅

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 95	🟢 100	🟢 100	🟢 100	🔗
/en/about	🟢 100	🟢 97	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 98	🟢 93	🟢 100	🟢 100	🔗
/en/download	🟢 95	🟢 100	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 100	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 100	🔗

[ovflowd]

@canerakdas cam tailwind styles be used here?

Also, I wonder if we really want to change the scrollbar on this PR. I feel this shouldn't be done on this PR and done in another discussion.

[canerakdas]

@canerakdas cam tailwind styles be used here?

It should be available, even if these utility classes are not available in tailwind, they can be added like

@apply [scrollbar-width:thin]

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.59%. Comparing base (45cf465) to head (1158d89).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8166   +/-   ##
=======================================
  Coverage   76.59%   76.59%           
=======================================
  Files         115      115           
  Lines        9602     9602           
  Branches      322      322           
=======================================
  Hits         7355     7355           
  Misses       2246     2246           
  Partials        1        1           

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

[ovflowd]

This PR is doing 3 different things at the same time that need different agreement:

• Sidebar spacing
• Colours
• Scrollbar styles

All of that are quite subjective and I'd like to hear from the rest of the team before we get this merged. cc @nodejs/nodejs-website

[canerakdas]

This PR is doing 3 different things at the same time that need different agreement:

• Sidebar spacing
• Colours
• Scrollbar styles

All of that are quite subjective and I'd like to hear from the rest of the team before we get this merged. cc @nodejs/nodejs-website

I think these are topics that should be evaluated separately. Although improves/fixes the styling of the progression sidebar, updating the scroll bars across the entire site is an little bit extreme update in my opinion

[canerakdas]

In the design system, we already have the green hexagon for the active state (https://www.figma.com/design/a10cjjw3MzvRQMPT9FP3xz/Node.js?node-id=332-34179&t=DqAOj6HcLm6dUhkN-0)

I still believe that these links shouldn’t have hover or active backgrounds. The design represents progress a flow from one node to another connected by lines. Adding a background here breaks that flow in my opinion 🥲

I remember we discussed similar points earlier regarding the links in the header.
Overall, I think links styled like buttons tend to be confusing. From a user’s perspective, a button is typically used to submit a form or trigger an action within the page (e.g., opening a modal,a download, changing theme or language), whereas a link is meant to navigate from one page to another and it shouldn’t look like a button

cc @nodejs/nodejs-website