Viewer Chrome — Starlight CSS Gotchas
Any element that forms part of viewer chrome (headers, toolbars, action bars) and lives inside a Starlight page must carry the .not-content class on its root element.
Why it matters: Starlight’s prose stylesheet applies line-height, margin, and typography resets to all descendants of its content container. Without .not-content, these rules leak into flex layouts and push button/icon elements off the shared baseline — producing subtle but persistent vertical misalignment that cannot be fixed by align-items alone.
Rule: Add not-content to the outermost element of any chrome component that renders inside the Starlight page flow.
<!-- ViewerHeader.astro — correct --><div class="viewer-header not-content" ...>Alignment companion: pair .not-content with align-items: flex-end (not center) on the chrome flex container. flex-end anchors all items to a shared bottom edge, which is more robust than center when children (e.g. Web Component sliders) have unpredictable intrinsic heights.