fix: Allow ToC to scroll independently of page content

[utkarsh125]

Description

Fixed the issue of the Table of Contents (ToC) being statically positioned. The ToC now scrolls to the top under the heading instead of being sticky. Adjustments were made to ensure it blends seamlessly with the article layout at
/en/download/package-manager/all

fixes: #7740

Files Changed

packages/ui-components/Containers/MetaBar/index.tsx

packages/ui-components/Containers/MetaBar/index.module.css

Validation

Verified that the ToC no longer remains sticky and is correctly positioned beneath the article heading.

Confirmed visual alignment for larger screens
No regressions observed in MetaBar behavior

Video

ToC.Fix-1747407308773.mp4

Related Issues

fixes: #7740

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 newly added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 18, 2025 9:19pm

[avivkeller]

I think this is causing the MetaBar to be too small:

Notice how it doesn't go all the way to the bottom

[utkarsh125]

On it

[utkarsh125]

Adding pb-12 kinda fixed the issue. The issue no longer persists, if there are any problems please let me know.

[utkarsh125]

@avivkeller

[avivkeller]

I don't think it did. Is changing the max height even needed at all?

[utkarsh125]

@avivkeller
Video Preview
It is need to give the sticky scroll to the wrapper, without it the ToC section scrolls in parallel to the main section
I have also fixed the issue where the metabar was too small.

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟠 83	🔗
/en/download	🟠 88	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.08%. Comparing base (fd87584) to head (22bd816).
Report is 2 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7754      +/-   ##
==========================================
+ Coverage   74.85%   75.08%   +0.22%     
==========================================
  Files          98       98              
  Lines        7895     7914      +19     
  Branches      200      196       -4     
==========================================
+ Hits         5910     5942      +32     
+ Misses       1984     1971      -13     
  Partials        1        1              

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

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[avivkeller]

Can you please check the visual regression: https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=6829e0dcf23a597de1aee02b

[utkarsh125]

Can you please check the visual regression: https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=6829e0dcf23a597de1aee02b

@avivkeller I did make some changes, although I do not know how to test it. Can you let me know how can I test the chromatic diffs?

[avivkeller]

Check your storybook against the most recent main build. I can also run a diff.

[avivkeller]

The issue is probably because of the added padding

[utkarsh125]

The issue is probably because of the added padding

@avivkeller

I have removed the additional p-4 from
maybe this will solve the issue, I had added it to give more space to the Metabar from the bottom, I hope this can fix it.

also, I was talking about this specific link that you sent, how can I obtain it for the latest build?
https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=6829e0dcf23a597de1aee02b

This thing was pretty helpful because of the comparative visuals.

&:last-child {
      @apply mb-0
          p-4 <-------
    }

[utkarsh125]

I think the chromatic diff is showing up because of sticky scroll bar, and in order to make sure the MetaBar isn't too small, I had changed the max-height to give some scrolling space to the wrapper in the MetaBar