Safe Area

While phone screens were plain rectangles the idea wasn't needed. Whatever counted as screen was usable screen.

That changed once devices covered the whole front face. A camera cutout pushed into the top of the display, the corners got rounded off, and a home indicator for swiping an app closed came to sit over the bottom. Coordinates that exist but are either invisible or out of reach appeared.

Pagedeck's app hit exactly that. Noa's design put the save button flush against the bottom edge, and Theo built it with no bottom inset. On devices with a home button it was fine; on devices with a home indicator the button overlapped the bar. The support requests that arrived didn't say the button overlapped — they said saving didn't work.

The operating system reports an inset for each of the four edges, and a mobile app adds those values into its layout. The numbers depend on the device and on the orientation.

1. Top. Clears the status bar and the camera cutout. On a device with no notch it's just the status bar height.
2. Bottom. Clears the home indicator. On a device with a home button it's zero.
3. Left and right. Zero when held upright, but rotating to landscape puts the notch on one side and produces an inset there.

The trick is not to hardcode any of these. They differ per device and change again with each new one, so read the value the system provides. Compute it once and freeze it and the layout breaks the moment the phone turns sideways.

What goes inside and what goes past the edge divides by nature. Buttons, text and inputs — anything to press or read — stay inside. Background fills and photos look better running to the very edge, since nothing is lost when they're clipped and an inset there just makes the screen look smaller. Read it together with the touch target rule and a bottom button needs its 44-odd points of height on top of the inset, not inside it.

"The save button overlaps the home indicator. Add the safe area inset."

Move an element pinned to the bottom up into the safe region.

"Let the background run to the edge and push only the text inside."

Handle what may be covered separately from what may not.

"In landscape the left menu gets clipped by the notch."

The orientation-dependent value wasn't accounted for.

Noa now draws the insets into app designs as grey bands, with a note that anything pressable goes inside the band and only backgrounds and photos go outside it.

Checking means splitting devices: with a notch and without, portrait and landscape, and with the keyboard raised. It behaves differently from responsive design, where layout shifts with window width, because the device's shape sets this value rather than its width — resizing a window never surfaces it.