Safe areas (notches) — demo

Why it matters: On iOS/Android, controls can disappear behind the notch or home indicator if you don’t use env(safe-area-inset-*). Simulate a notch to see why!
Bad: ignores safe area
Inbox

This card’s fixed top and bottom bars ignore the device’s safe area. On devices with notches or home indicators, controls are overlapped—and become hard or impossible to use.

On desktop, use the toggle above to simulate these insets.

Better: uses safe-area insets
Inbox

This variant uses padding-top: max(env(safe-area-inset-top), var(--sim-safe-top)); and matching bottom style, so controls are never overlapped by the notch or home indicator.

Bonus: The pattern works on Android and iOS, and lets you add extra space for in-app gesture/nav bars or overlays.

Relevant meta + CSS:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
.bar-top, .bar-bot {
   /* fallback for desktop/demo: */
   padding-top: max(env(safe-area-inset-top), var(--sim-safe-top));
   padding-bottom: max(env(safe-area-inset-bottom), var(--sim-safe-bottom));
}
Note: pre-iOS 11.2 used constant(safe-area-inset-top)