fix:layout-shift caused by the radix dropdown menu.

[shoaibkh4n]

Description

There are some layout shifts in the website which is caused by radix dropdown menu. By default radix drop-down add custom css properties to body tag which includes overflow:hidden that literally caused the sudden layout shift when open the dropdown menu. To fix this there is a css property scrollbar-gutter: stable that will take care of this kind of scrollbar issue. Tailwind doesn't support this property by default right now, so I added this property by creating a html tag in index.css file. This property has a great browser support, so no need to worry about that.

Validation

Before:

Before.mp4

After:

after.mp4

Related Issues

No issue found. Directly made this PR.

Check List

• [✅] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [✅ ] I have run npx turbo format to ensure the code follows the style guide.
• [✅] I have run npx turbo test to check if all tests are passing.
• [✅] I have run npx turbo 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 Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Mar 24, 2024 5:49pm

[ovflowd]

so I added this property by creating a html tag in index.css file. This property has a great browser support, so no need to worry about that.

Tailwind allows you to add custom stuff inline (any CSS tag), I remember @canerakdas did that, Caner can you provide some help here? 👀

[shoaibkh4n]

Tailwind allows you to add custom stuff inline (any CSS tag), I remember @canerakdas did that, Caner can you provide some help here? 👀

Yeah , there are some ways to set custom styling inline to any tag, but this will cause problem in case website got multiple layouts that may have multiple html tags, and the layout shift will occur on everypage where dropdown used. So instead of first adding new utility class with custom property to plugins in tailwind.config.ts file and then applying to html on base.css file, its better to just add this to global css with html tag and this property. This way is much cleaner, simple and easy to understand. Just my view , let me know your view on this or any suggestion.

[ovflowd]

Tailwind allows you to add custom stuff inline (any CSS tag), I remember @canerakdas did that, Caner can you provide some help here? 👀

Yeah , there are some ways to set custom styling inline to any tag, but this will cause problem in case website got multiple layouts that may have multiple html tags, and the layout shift will occur on everypage where dropdown used. So instead of first adding new utility class with custom property to plugins in tailwind.config.ts file and then applying to html on base.css file, its better to just add this to global css with html tag and this property. This way is much cleaner, simple and easy to understand. Just my view , let me know your view on this or any suggestion.

But I was referring using a tailwind tag within the global styles as we do already 👀

But all good, not everything needs to be TW hehe

[canerakdas]

so I added this property by creating a html tag in index.css file. This property has a great browser support, so no need to worry about that.

Tailwind allows you to add custom stuff inline (any CSS tag), I remember @canerakdas did that, Caner can you provide some help here? 👀

In Tailwind, you can use CSS property/value pairs in square brackets.

For example, for this; [scrollbar-groove:constant]

[shoaibkh4n]

so I added this property by creating a html tag in index.css file. This property has a great browser support, so no need to worry about that.

Tailwind allows you to add custom stuff inline (any CSS tag), I remember @canerakdas did that, Caner can you provide some help here? 👀

In Tailwind, you can use CSS property/value pairs in square brackets.

For example, for this; [scrollbar-groove:constant]

Hey @canerakdas , yeah we can do this too but this can be done in individual tag as class names but this might not be the efficient way to do this here because there might be multiple html tags for multiple layouts so you basically need to add className="[scrollbar-gutter:stable]" in every html tag💀💀.

[shoaibkh4n]

@ovflowd , done the changes , Can you approve this and merge it. 👍

[ovflowd]

so I added this property by creating a html tag in index.css file. This property has a great browser support, so no need to worry about that.

Tailwind allows you to add custom stuff inline (any CSS tag), I remember @canerakdas did that, Caner can you provide some help here? 👀

In Tailwind, you can use CSS property/value pairs in square brackets.

For example, for this; [scrollbar-groove:constant]

Hey @canerakdas , yeah we can do this too but this can be done in individual tag as class names but this might not be the efficient way to do this here because there might be multiple html tags for multiple layouts so you basically need to add className="[scrollbar-gutter:stable]" in every html tag💀💀.

I think you misunderstood what Caner and me are saying. If you use @apply directly on the base.css with the example Caner wrote it should work :)

[shoaibkh4n]

@ovflowd , yeah, I misunderstood that, updated it again 😄😄✌.

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 90	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 91	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 99	🟢 90	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟠 89	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 90	🟢 100	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	80.07% (450/562)	79.55% (144/181)	71.17% (79/111)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
90	0 💤	0 ❌	0 🔥	4.493s ⏱️

[canerakdas]

LGTM! Thank you for your contribution

[AugustinMauroy]

LGTM ! Good first contribution

[shoaibkh4n]

Hey @ovflowd , I was wondering if there's anything else needed on my end for the PR to be merged? Just checking in. 👀

[ovflowd]

Hey @ovflowd , I was wondering if there's anything else needed on my end for the PR to be merged? Just checking in. 👀

Per Contributing Guidelines, PRs must wait for 48 hours to be merged, except if fast-tracked.

[ovflowd]

I'm fast-tracking this PR:

[shoaibkh4n]

Hey @ovflowd , I was wondering if there's anything else needed on my end for the PR to be merged? Just checking in. 👀

Per Contributing Guidelines, PRs must wait for 48 hours to be merged, except if fast-tracked.

Oooh, Got it, Thanks @ovflowd ✌🚀🔥🔥