Summary

Fixes #4833 — the fullscreen dialog (used on phones) did not respect iOS safe area insets, so on notched devices:

• the dialog title was hidden behind the notch
• the close button was hidden behind the notch
• the bottom Save / Cancel buttons were hidden behind the home indicator

The :root stylesheet already exposes --sat, --sar and --sab CSS variables mapped to env(safe-area-inset-*), and index.html already sets viewport-fit=cover in the viewport meta tag. The variables were simply never being used anywhere in the component styles. This PR applies them to the fullscreen dialog.

Changes

packages/excalidraw/components/Dialog.scss — only the .Dialog--fullscreen block is touched (no impact on tablet/desktop layout):

.Dialog--fullscreen {
  .Dialog__title {
    // Push the title below the iOS notch / status bar.
    padding-top: var(--sat);
  }

  .Dialog__close {
    top: calc(1.25rem + var(--sat));
    right: calc(1.25rem + var(--sar));
  }

  .Dialog__content {
    // Keep bottom controls (e.g. "Save"/"Cancel" buttons) above the home indicator.
    padding-bottom: var(--sab);
  }
}

env(safe-area-inset-*) resolves to 0 on devices without a notch, so the change is a no-op there.

Why this approach

• Surgical. One file, one selector, no component code, no TSX changes, no tests to update.
• Uses existing design tokens. --sat / --sar / --sab are already declared in packages/excalidraw/css/styles.scss — this PR is just the first place to consume them.
• Fullscreen-only. The fix is scoped to .Dialog--fullscreen, which is only applied when formFactor === "phone", so the desktop/tablet layout is untouched.
• No new variables, no fallbacks needed. The env() function is supported everywhere Excalidraw is expected to run (every browser that ships viewport-fit=cover also supports env()).

Verification

Built a minimal HTML reproduction matching the exact Modal → Dialog → Island → title/close/content DOM and the same SCSS, with a simulated iPhone X safe area (top: 47px, bottom: 34px) injected via :root overrides. Measured getBoundingClientRect() and computed styles for the title, close button, and content in both states:

Tested at 390×844 (iPhone 13 viewport) with Chromium 145.

Previous attempt

PR #5384 (closed, not merged in 2022) took a much larger approach: it moved the title to the bottom of the screen, but the maintainers' feedback at the time was that the layout needed "minor design tweaks" and the PR was eventually closed. This PR keeps the title at the top (where users expect it) and only adjusts the safe-area insets, which is a smaller, more conservative change.

Test plan

• Manual: open the export dialog (or any dialog rendered via Dialog) on an iPhone X or later, in both portrait and landscape. Confirm the title, close button, and bottom Save/Cancel buttons are fully visible.
• Manual: open the same dialog on a phone that has no notch (e.g. older iPhone SE). Confirm the layout is unchanged (the env() values resolve to 0).
• Manual: open any dialog on desktop / tablet — should be unaffected because .Dialog--fullscreen is only applied on phones.

No automated test was added because the change is a pure CSS layout adjustment with no behavior to assert; the existing visual regression tests don't cover device-pixel-ratio variations of this kind. Happy to add a snapshot test if maintainers want one.