Bug: limit selector is breaking the layout (a bit)

[a0m0rajab]

Describe the bug

When you go to https://beta.app.opensauced.pizza/python/dashboard/filter/top-100-repos?range=90 and click on the number of contributors to view, the layout breaks and have an extra spaces.

Steps to reproduce

1. https://beta.app.opensauced.pizza/python/dashboard/filter/top-100-repos?range=90
2. click on showing 10 per page
3. you will see the header is getting resized

Browsers

No response

Additional context (Is this in dev or production?)

Discovered in #2185

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[Kepsondiaz]

heyy i see what you say.
i will take it.

[takanome-dev]

Hey @Kepsondiaz, good to see you here 🙂

Here is a similar fix for this kind of behavior #1704

[a0m0rajab]

@takanome-dev and @Kepsondiaz thank you for looking into this, the issue is happening due an overflow-hidden been added to the page, I am not sure how that is being added right now, but you could notice it when you open the inspector and click on the select that you have, this will let you notice the changes in the inspector.

Here is the extra code that is being added when you open the selector:

I think this is related to this component components\atoms\Select\limit-select.tsx

This is one of the libraries that is being added through that element: https://github.com/theKashey/react-remove-scroll-bar/blob/master/src/constants.ts