ENGLISH·COURSE API
    Preparing search index...

    Function

    DialogContent

    • The dialog card itself — portalled, centered, and layered over a DialogOverlay.

      Parameters

      Returns Element

      Styled on the project's tokens rather than shadcn's stock neutrals: bg-card is the Immersion Cinema panel surface shared with the outline sidebar, and rounded-xl matches those panels' radius.

      It is also capped at max-h-[calc(100svh-2rem)] and scrolls internally. shadcn's stock content sets no max height, which is fine until the card is taller than the viewport: because it is position: fixed, the page cannot scroll to reveal the overflow, so the footer — and with it the primary action — becomes literally unreachable. svh rather than vh so a mobile browser's collapsing URL bar cannot reintroduce the same trap.

      Accessibility: every DialogContent must contain a DialogTitle, which supplies its accessible name — Radix warns at runtime when one is missing. If the design has no visible heading, render the title visually hidden rather than dropping it. Pair it with a DialogDescription so screen readers get the dialog's purpose, not just its name.

      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Resume playback</DialogTitle>
          <DialogDescription>Pick up where you left off.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button>Resume</Button>
        </DialogFooter>
      </DialogContent>

    Settings

    Member Visibility