A pinned bar under the notch or the home indicator
==================================================

Rule · bucket: mechanical · severity: warning · detector: safe-area · since: v0.10.0
Section: Things to avoid
Group: Spacing and layout

Forbidden:
  `position: fixed; bottom: 0` on a tab bar, on a page whose viewport meta tag sets `viewport-fit=cover`

Instead:
  Pad the pinned edge with its inset — `padding-bottom: env(safe-area-inset-bottom)` for a bottom bar, and the matching inset for any other edge it touches.

`viewport-fit=cover` extends the page under the notch and the gesture bar. That is what makes an edge-to-edge design possible, and it also means a bar at `bottom: 0` has its labels sitting beneath the home indicator, where a swipe meant for the tab closes the app instead.
Without `viewport-fit=cover`, the browser keeps the page inside the safe area on its own, and there is nothing to do.