/** * Base rules that every page gets, loaded before anything else. * * Two things live here, both about scrolling. * * 1. Nothing in Atmos scrolls horizontally. A sideways scrollbar is always a * layout bug — some element overflowing its container — and letting the page * scroll to reveal it hides the bug instead of showing it. Clipping at the * root means an overflow shows up as clipped content, which gets fixed, * rather than as a stray scrollbar, which doesn't. * * The clipping is `overflow-x: clip`, NOT `hidden`, and the difference is * not cosmetic. `overflow-x: hidden` on makes the body a scroll * container in its own right (the y axis computes to `auto` the moment one * axis is not `visible`). The page then has two nested scrollers: the * viewport, which actually holds the overflow, and the body, which cannot * scroll. A wheel event over the content lands on the body — and with * `overscroll-behavior: none` also set on it, that scroll was not allowed to * chain out to the viewport, so it went nowhere. Dragging the scrollbar, * which talks to the viewport directly, still worked. That was the * "scrolling only works on the scrollbar" bug on every page of the site. * `clip` clips without creating a scroll container, so there is nothing to * swallow the wheel. * * 2. No elastic overscroll. In a browser tab the rubber-band at the end of a * scroll is a familiar OS affordance. Inside the desktop app it isn't — the * window has no address bar or page chrome, so the whole UI visibly peeling * away from the edge reads as the app coming apart. `overscroll-behavior` on * the root stops the bounce for the page as a whole. It is deliberately not * repeated on : there it would block wheel scrolling from reaching the * viewport, which is half of the bug described above. A nested panel that * really must not chain sets `overscroll-behavior: contain` on itself. * * Anything that genuinely needs to scroll sideways (wide tables, code) does it * in its own container with its own `overflow-x: auto`, never on the page. */ html { overflow-x: clip; overscroll-behavior: none; } body { overflow-x: clip; /* Belt and braces: a child with a fixed width wider than the viewport would otherwise still stretch the body box even with overflow clipped. */ max-width: 100%; }