base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

[docs] Code block scroll improvements

Open vladmoroz opened this issue 1 year ago • 2 comments

  • 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

vladmoroz avatar Dec 19 '24 19:12 vladmoroz

Netlify deploy preview

https://deploy-preview-1187--base-ui.netlify.app/

Generated by :no_entry_sign: dangerJS against 5a9c2654ed94c193c00442086d44664f0e0a9fc4

mui-bot avatar Dec 19 '24 19:12 mui-bot

@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

vladmoroz avatar Dec 19 '24 19:12 vladmoroz

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.

colmtuite avatar Dec 20 '24 12:12 colmtuite

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.

vladmoroz avatar Dec 20 '24 12:12 vladmoroz