// =========================================================== // bbrOverlayPortal — render a full-screen overlay into , out of whatever // stacking context its mount site happens to sit in. // // THE TRAP THIS EXISTS FOR // Two page roots opt out of the body grain by lifting themselves above it: // .mc { position: relative; z-index: 2 } /collection (collection.css) // .mkt { position: relative; z-index: 2 } /collection, signed out // A positioned element with a z-index is a STACKING CONTEXT, so every z-index // inside it is resolved against that root's own 2 — not against the page. The // modals are all mounted from inside those roots, so `z-index: 500` on // .av2-backdrop and `600` on .ti-overlay both lost to .topnav's 50, which is a // sibling of the root and therefore a genuine peer of the 2. // // On desktop that was invisible: the modals are centred cards, so the nav only // ever covered empty backdrop. On a phone every one of them is a full-bleed // sheet (100dvh, no radius) whose own sticky header carries the × and the back // chevron — and the nav painted straight over that header, hiding the title and // swallowing the taps. With the sheet covering the viewport there is no backdrop // left to tap either, so those two controls were the only way out and neither // could be reached. Reported first on the daily report (The Index); it was the // same bug on all six. // // Rendering into document.body puts the overlay back in the root stacking // context, where its z-index means what it says. Nothing else changes: React // events still bubble through the React tree rather than the DOM tree, so the // backdrop's onClick, Escape handlers and scroll locks all behave exactly as // they did, and no CSS scopes these overlays under an ancestor. // // Falls through to rendering in place if createPortal is somehow unavailable — // a modal under the nav is bad, a blank page is worse. // // Globals in: React, ReactDOM. Exposes window.bbrOverlayPortal. // Loaded FIRST among the components, before anything that calls it renders. // =========================================================== function bbrOverlayPortal(node) { if (typeof ReactDOM === "undefined" || !ReactDOM.createPortal || typeof document === "undefined") return node; return ReactDOM.createPortal(node, document.body); } window.bbrOverlayPortal = bbrOverlayPortal;