Safe area / notch insets
The padding that keeps your UI clear of the notch, home indicator, and rounded corners so nothing important sits under hardware.
See it
What it is
The safe area is the rectangle of the screen the OS promises is not covered by hardware or system chrome: the notch or Dynamic Island, the status bar, the home indicator, the gesture bar, and the rounded corners. The OS reports it as four inset values (top, right, bottom, left) that you turn into padding. On the web it is env(safe-area-inset-*) plus viewport-fit=cover in the viewport meta tag; in React Native it is useSafeAreaInsets from react-native-safe-area-context; in SwiftUI it is applied by default until you opt out with ignoresSafeArea.
The rule that makes designs look right: backgrounds go edge to edge, content gets the inset. Let your header color, hero image, or sheet bleed under the notch, then pad the text and tap targets inside it. If you inset the whole container instead, you get an ugly white band above your colored header and a scroll view that clips at the top.
Gotchas: insets are dynamic, not constants. They change on rotation and when a call or screen-recording bar appears, so never hardcode 44px or 34px. The keyboard is a separate problem, not a safe-area one: in most stacks (CSS env(), react-native-safe-area-context) the keyboard does not move your safe-area insets at all, and you handle it with its own keyboard-avoidance API or viewport unit. A few frameworks do fold keyboard height into their safe-area model, so check yours instead of assuming either way. Android insets behave differently between three-button and gesture navigation, and in a browser env() returns 0 until viewport-fit=cover is set, which makes the bug invisible in your simulator and obvious on a real phone.
Ask AI for it
Make this screen safe-area aware on all four sides. Add viewport-fit=cover to the viewport meta tag, then apply padding from all four env(safe-area-inset-*) values, each wrapped in max() with a base padding, e.g. max(16px, env(safe-area-inset-bottom)). The header and any fixed bottom bar need left and right insets too, not just top and bottom, because in landscape the notch and the rounded corners eat into the sides. Keep background colors and images full bleed to the screen edges, inset only the text and tap targets, and verify in both orientations that nothing lands under the Dynamic Island, the home indicator, or the rounded corners. Handle the keyboard separately with the platform's keyboard-avoidance API; do not expect safe-area insets to account for it.