78
safe area
The notch, the home indicator, the status bar. Content lives inside the inset, not under the glass.
What is safe area?
Safe area insets are the padding the OS reserves for hardware and system UI. A full-bleed layout must opt in. Text and buttons stay inside the inset.
Why does safe area matter when vibe coding?
Models pin a button to `bottom: 0` and a title to `top: 0`. On a real phone both sit under system chrome. Name safe area or the screenshot from the simulator lies.
How do you do safe area?
Respect insets on every fixed header and footer. Test on a notched phone and a short phone. Do not hardcode 44px and call it done.
How do you ask a model for safe area?
Respect safe-area insets. No text or button under the notch or home indicator. Headers and footers pad by the inset. Do not hardcode a status-bar height.
What goes wrong with safe area?
Padding the whole screen and also the tab bar, so content double-pads and looks shy. Inset once, at the shell.