style(sidebar): make hover full-width and add clearer item spacing

[IslemDjd]

Description

• Enhance sidebar UI to improve discoverability and readability.
• Make the hover state span the full row width for non-active items; add consistent spacing between items; avoid double “pill” highlights by removing label background when the row is highlighted.
• Includes minor contrast adjustments for hover/active states to maintain accessibility.

Validation

• Built locally with pnpm build and verified no build errors.
• Ran pnpm test and confirmed tests pass.
• Manually verified on desktop and mobile breakpoints:
• Hover covers entire row for non-active items.
• Item spacing is consistent across groups.
• Active state keeps full-row background on hover.

Screenshots:
Before:

After:

Related Issues

• N/A, small UI 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.

[Copilot]

Pull Request Overview

This PR enhances the sidebar UI to improve user experience by making hover states more discoverable and improving visual consistency. The changes focus on making hover effects span the full width of sidebar items and adding consistent spacing between items.

• Full-width hover backgrounds for non-active sidebar items to improve discoverability
• Consistent gap spacing between sidebar items and groups
• Removal of double "pill" highlights by making label backgrounds transparent when row is highlighted

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/Sidebar/SidebarItem/index.module.css	Updates hover and active states to use full-width backgrounds, removes pill-style label backgrounds, and improves text contrast
packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css	Adds consistent gap spacing for item lists in sidebar groups

---

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

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
nodejs-org	Ready	Preview	Sep 9, 2025 7:23pm

[AugustinMauroy]

LGMT ! Thanks 🙏 for your contribution.

[mikeesto]

This looks good on the About page, but not so great on Learn

[github-actions]

Lighthouse Results

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.59%. Comparing base (1338a29) to head (be4466e).
⚠️ Report is 6 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8158      +/-   ##
==========================================
+ Coverage   76.58%   76.59%   +0.01%     
==========================================
  Files         115      115              
  Lines        9602     9602              
  Branches      322      322              
==========================================
+ Hits         7354     7355       +1     
+ Misses       2247     2246       -1     
  Partials        1        1              

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