mi6
Whole page moves when switching tabs on website code examples
Summary of the bug
When you switch between the "Web component" and "React" tabs on the website on a lot of the component Code pages, the whole page moves up and down.
🪜 How to reproduce
- Go to one of the component Code pages (seems to happen on most of them) e.g. switch page, and scroll down to one of the code examples further down the page.
- Click between the "React" and "Web component" tabs on the code examples.
- See that the whole page jolts up and down as you change between the tabs (it is more serious on some pages than others).
📸 Screenshots or code
https://github.com/user-attachments/assets/6beb040f-aab7-4076-b681-a8dbddaadfd3
🧐 Expected behaviour
It would be best if the page doesn't move at all. It is not a nice user experience and can be confusing for the user as they will wonder what has happened / where they have moved to on the page.
Additional info
Users may not actually see this issue very frequently; users who only want to see the "Web components" tab will not see it all, users who want to see the "React" tab would see it once per page.
The issue doesn't seem to happen on the v2 website.
Proposal: Set a height on the code-preview window (with overflow:scroll) so that switching between wc/react doesn't change height of all code previews on page
Make sure that the addition of vertical scroll to these text areas (which already have a horizontal scroll) doesn't breach Reflow and it's insistence on one dimension scrolling
Added a point for investigating best solution
an alternative solution may be to store the scrollTop when the button is clicked & reset it to this value afterwards, so long as this does not make the experience too unpleasant
