Modal - Safe Area

Test safe-area handling in modals. Red overlays indicate safe areas (top, bottom, left, right).

Landscape simulation: Left and right safe areas are set to 44px to test devices with side notches.

With Footer

Default Modal

Centered dialog on tablet - should NOT have safe-area padding

 Present

Fullscreen Modal

Full screen - footer handles safe-area

 Present

Sheet Modal (Partial)

At 0.5 breakpoint - should have bottom safe-area only

 Present

Sheet Modal (Full)

At 1.0 breakpoint - should have bottom safe-area

 Present

Card Modal (iOS)

Card presentation with presentingElement

 Present Without Footer (wrapper padding)

Fullscreen Modal (no footer)

Wrapper padding should prevent content overlap

 Present

Card Modal (no footer)

On phones, wrapper padding should prevent content overlap

 Present

Default Modal (no footer)

On phones, wrapper padding should prevent content overlap

 Present