On a dark documentation page, the sidebar had a nice thin orange scrollbar and everything else had the browser's default light one, arrows and all. Fixing that led to a more annoying bug: some pages scrolled sideways when they shouldn't.
One scrollbar style for everything
Now the page, the sidebar, the "On this page" list, code samples and (on a phone) tables all share one scrollbar. It's thin, rounded and orange, quiet at rest, brighter under the pointer and fully orange while dragged, with no arrow buttons. A single mixin, docs-scrollbar in _docs.scss, does all of it. The page's own bar is only styled where there is a documentation page (:root:has(.docs)), so no other page changes.
The catch with the standard properties
The sidebar's old style set scrollbar-width and scrollbar-color. In Chromium, setting those makes the browser ignore the custom bar and draw its own native thin one, arrows included. Those two now go to Firefox only, the same split the UI Builder's scrollbars use.
Why pages scrolled sideways
Three causes:
- Long API names like
Roblox.Web.WebAPI.Models...orPOST /v1/universes/{universeId}/...have nowhere to break. In the sidebar they made 655px of content in a 218px box. In the library listing they made the page 1700px wide in a 1440px window. They now break anywhere, and the sidebar never scrolls sideways. - Video embeds. 133 of them are written at a fixed 880 x 495 or 560 x 315. They now shrink to the article and keep a 16:9 shape.
- On a phone, a page with one of those videos scrolled sideways.
Verifying it
A test compiles the real stylesheet and checks the rules, including that the standard properties only appear inside the Firefox-only block. In headless Edge, every scroller computed to the custom bar, and 29 pages at desktop width and the same 29 at phone width had no sideways scroll. I haven't tried Firefox or Safari.