peter
6075e96bd0
Add components/Overlay.tsx (portals to <body>) and route the in-tree full-screen/ floating holdouts through it — ChatDock, OnboardingWizard, GlassTuner — so they escape any ancestor stacking context (mask/transform/backdrop-filter) instead of relying on a bare high z-index. Toaster stays in-tree (it's content-column-scoped by design, outside the masked scroller); Welcome is a page, not an overlay.
15 lines
955 B
TypeScript
15 lines
955 B
TypeScript
import { type ReactNode } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
// The app's overlay-root convention. Any full-screen or floating overlay renders THROUGH this so it
|
|
// escapes whatever ancestor stacking context it was declared in — a `mask-image`/`transform`/`filter`
|
|
// on the page scroller (or a rail's `backdrop-filter`) would otherwise trap a `fixed` child and let
|
|
// the chrome paint over it. That is the exact class of bug that buried the players in E3; the
|
|
// modal/player family already dodges it by portaling to <body>, and this makes that the one blessed
|
|
// way. Stacking among overlays is then decided by DOM order + the z-index token scale (tailwind
|
|
// `zIndex`), never by an ad-hoc magic number. Portals to <body> (the existing de-facto target).
|
|
export default function Overlay({ children }: { children: ReactNode }) {
|
|
if (typeof document === "undefined") return null;
|
|
return createPortal(children, document.body);
|
|
}
|