Fix layout shift caused by redundant styles

[monochromer]

Description

Initially, @shoaibkh4n noticed that when opening and closing the drop-down list on the page https://nodejs.org/en/download layout-shift occurs and suggested a solution – add scrollbar-gutter: stable;.

This really helped, but it led to an empty space on other pages equal to the size of the scrollbar (by the way, this happens only in SPA mode). @daklay noticed this and suggested setting scrollbar-gutter: auto, but this is unnecessary, since it is the default value.

In fact, Radix UI Dropdown Menu is already solving this problem, but it was prevented by the thoughtless assignment of such styles:

html,
body {
  width: 100%;
}

There is a difference between width: 100% and width: auto. Therefore, you just need to delete these styles.

Validation

After this changes no layout shift and empty spaces on other pages:

https://github.com/nodejs/nodejs.org/assets/6412192/686f2825-87e4-47e9-a586-a9df982abd61

Related Issues

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npm run format to ensure the code follows the style guide.
• [x] I have run npm run test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jul 5, 2024 0:12am

[shoaibkh4n]

I think its a great suggestion, scrollbar-gutter: stable actually caused the issue on empty space on all pages thanks @monochromer for noticing this, LGTM 🔥👍,

[ovflowd]

Im pretty sure we added scrollbar-gutter and then removed for some reasons...

@canerakdas any insights here? 🤔

[canerakdas]

Im pretty sure we added scrollbar-gutter and then removed for some reasons...

@canerakdas any insights here? 🤔

We removed it in this PR because it looks better and did not create a layout shift

What I don't understand is that I couldn't find this fix in the Radix primitives changelog :thinking:

[ovflowd]

What I don't understand is that I couldn't find this fix in the Radix primitives changelog 🤔

Not sure I got your comment, are you saying a recent change on the Primitives created such layout shift?

[canerakdas]

Not sure I got your comment, are you saying a recent change on the Primitives created such layout shift?

I mean I think the recent changes fixed the layout shift. Even though I reverted all changes, I couldn't reproduce the layout shift issue 🤷‍♂️

[monochromer]

Most likely, Radix Dropdown has a solution to eliminate layout shift from the very beginning. But the styles html, body { width: 100%; } prevent it from working correctly. And any scrollbar-gutter setting in this case is simply superfluous.

[bmuenzenmeyer]

This PR will need to be rebased or recreated now that https://github.com/nodejs/nodejs.org/pull/6850 merged.

[monochromer]

This PR will need to be rebased or recreated now that #6850 merged.

done

[github-actions[bot]]

Unit Test Coverage Report

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 :zzz:	0 :x:	0 :fire:	5.378s :stopwatch: