STRATA

Components / Fullscreen Dialog

Fullscreen Dialog

The fullscreen builder-overlay chrome: real Dialog semantics (portal, backdrop, Esc, focus trap) on a fixed fullscreen frame with the ElleMark header, a round close button, and an optional fixed footer action bar. Used by the slideshow builders and reference pickers.

import { FullscreenDialog, FullscreenDialogFooter } from '@layers/ui/fullscreen-dialog'

Rendered stock

House rules

  • Deliberately NOT unified with FullscreenModal (founder ruling 2026-07-08): FullscreenModal is the titled viewer surface, FullscreenDialog is the builder/picker surface.
  • Controlled only: the caller owns open/onOpenChange; ariaLabel names the dialog (it feeds both the aria-label and the sr-only title — the chrome has no visible title).
  • footerPadding (default true) reserves 72px so scrolled content clears the FullscreenDialogFooter; pass false when the content lays itself out against the footer with fixed positioning.
  • FullscreenDialogFooter is the one footer bar: actions go in children (right slot), secondary/back content in the left slot — never hand-write the wrapper markup.
  • Styles ship with the component (fullscreen-dialog.css is self-imported); no consumer-side stylesheet wiring.