Scrollbar appears when clicking "Read the docs" dropdown, causes layout shift

[priyankarpal]

When I click on the "Read the docs" button in the navigation menu, a scrollbar appears on the right side of the page. This creates a poor user experience because:

The page content shifts slightly to the left when the scrollbar appears. The scrollbar is unnecessary since the dropdown menu is small and fits on the screen

• Brave
• Linux

https://github.com/user-attachments/assets/3d0ddbdc-ceb0-473d-8e0a-fe2a1548fe10

[Scoutersq]

Can you please assign it to me I will be more than happy to solve this issue😊

[adityasharmawork]

Hey maintainers! I found this issue really very interesting and I have also gone through the codebase and have figured out the solution, I expect to solve it very soon! I would be happy if you can assign me this issue! Thanks in advance!

[AshutoshMore142k4]

don't assign it to me , siuu , OTHERWISE IT WOULD GET FIXED instantly

[NishchalKap]

Hi! I would like to work on this issue as my first contribution to this project. I've identified the root cause: the scrollbar appears because the dropdown content likely forces the body to become scrollable. The fix should involve:

1. Adding overflow: hidden or overflow-y: auto to the body/html when the dropdown is open
2. Using CSS to prevent layout shift, possibly with scrollbar-gutter: stable or by reserving space for the scrollbar
3. Ensuring the dropdown has proper positioning (absolute/fixed) so it doesn't affect document flow

I'll start working on this right away. Could you please assign this issue to me? Thanks!

[anmolbhadoriya5849]

Hey, I’d love to take this up. Can you assign me the issue?

[Soumen-1]

Hi, can I work on this issue?

[adityasharmawork]

Hi! I saw an issue open at Lingo Dev's GitHub - https://github.com/lingodotdev/lingo.dev/issues/1254 And, this issue really excites me a lot and I am looking forward to fix this as soon as possible, while I am already aware of the possible issues that may be causing these and was going through the codebase to fix it, I saw that the repo - https://github.com/lingodotdev/lingo.dev/ mostly comprises of the actual internal CLI tool, Compiler, and various other SDK packages, it has a directory called as "demo" which has different examples of the UI using NextJS / React Router, etc. But, the actual code of the Lingo Dev website which has this issue is not there. Can you plesae help me out find it, or correct me if I am missing something! Also, I would be highly grateful if you can assign this issue to me! (My GitHub - https://github.com/adityasharmawork) Thanks!

Edit - I think the Frontend and Docs code isn't Open Sourced yet, so kindly either Open Source the codebase so that we can fix the issue, or close this issue as it is an issue created in a possibly wrong Repository. Or, correct me if I am wrong. @sumitsaurabh927

[sumitsaurabh927]

@davidturnbull need you here

[maxprilutskiy]

Thanks for reporting! This will be handled by the Lingo.dev core team in our separate website repo. We'll close this once it's resolved there.