Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.3 kB · 29 lines
TSX
123456789101112131415161718192021222324252627282930// Published pages are static HTML: they ship the anonymous variant of every// identity-dependent control and only learn who the viewer is after mount.// Rendering an inert copy of the variant that needs the most room in the same// grid cell as the live one pins the box to the height the page was laid out// around, so nothing above or below can move when identity lands — at any// viewport, without hardcoded heights that silently rot.export function ReservedGeometry(props: { reserve: React.ReactNode; children: React.ReactNode; // By default the reserver is laid out at its max-content width and clipped to // zero, so it only contributes height: most of these boxes sit in fit-content // parents, where a wider reserver would move the control inside it. Set this // when the box is full-width regardless and the reserved content wraps — it // then has to lay out at the real width to reserve the right height. reserveWidth?: boolean;}) { return ( <div className="grid"> <div className={`[grid-area:1/1] invisible ${props.reserveWidth ? "" : "w-0 overflow-hidden"}`} aria-hidden inert > <div className={props.reserveWidth ? "" : "w-max"}>{props.reserve}</div> </div> <div className="[grid-area:1/1] self-center">{props.children}</div> </div> );}