[docs] Code block scroll improvements
- Make sure scrollbar appears on hover
- Make sure the scrollarea is focusable
- Fix a bug when scrollarea renders would cause contents to lose text selection (not as much a bug as an unfortunate coincidence of rendering the viewport and dangerously setting inner html on it)
- Add max height to the code block scrollarea
Closes https://github.com/mui/base-ui/issues/1186
Netlify deploy preview
https://deploy-preview-1187--base-ui.netlify.app/
Generated by :no_entry_sign: dangerJS against 5a9c2654ed94c193c00442086d44664f0e0a9fc4
@atomiks I think it's clear we need to be able to show only the scrollbars that match the direction you are scrolling in
https://github.com/user-attachments/assets/8c0faec6-ee95-4f32-8b4e-2f0e2c87c9cc
Mentioned/tracking in https://github.com/mui/base-ui/issues/982
Feels like a pretty bad experience getting get trapped in the code block when trying to scroll up/down the page. Of course, the alternative is very long code blocks. Currently, I prefer no max-height rather than being trapped in scroll areas. Not sure yet if there's a different way to solve it. I want to live with the docs for 1–3 months before tackling problems like this.
OK, removed max height for now. Let's live with it, I personally find getting trapped in code blocks more annoying than long continuous scroll.