fix(layout): honour the safe area, since the viewport asks to cover it #159

Nytt ärende

Stängd

öppnade 2026-08-02 12:30:10 +00:00 av supernaut · 0 kommentarer

supernaut kommenterad

2026-08-02 12:30:10 +00:00

Ägare

src/layouts/base.astro:81 sets viewport-fit=cover, but nothing in src/style/**,
src/components/** or src/layouts/** references env(safe-area-inset-*) — grep returns nothing.

--page-margin is 24 px (src/style/variables.scss:238). The safe-area inset on a notched iPhone
in landscape is around 44 px, so the first main-navigation link, the language switcher and the
footer's first column sit partly under the notch or a rounded corner. In portrait the footer's last
row sits under the home indicator. viewport-fit=cover is only correct when paired with the insets.

Fix

Add padding-inline: env(safe-area-inset-left) env(safe-area-inset-right) and
padding-block-end: env(safe-area-inset-bottom) to .site-header, .site-footer and
.page-content, behind @supports (padding: env(safe-area-inset-left)). Insets are 0 on devices
without a notch, so this is inert everywhere else.

Done when

In landscape on a notched device, no navigation link, no language switcher and no footer link is
clipped by the notch or a rounded corner.
Nothing changes on a device without safe-area insets.

Part of gitborg/gitborg-docs#67.

`src/layouts/base.astro:81` sets `viewport-fit=cover`, but nothing in `src/style/**`, `src/components/**` or `src/layouts/**` references `env(safe-area-inset-*)` — grep returns nothing. `--page-margin` is 24 px (`src/style/variables.scss:238`). The safe-area inset on a notched iPhone in landscape is around 44 px, so the first main-navigation link, the language switcher and the footer's first column sit partly under the notch or a rounded corner. In portrait the footer's last row sits under the home indicator. `viewport-fit=cover` is only correct when paired with the insets. ## Fix Add `padding-inline: env(safe-area-inset-left) env(safe-area-inset-right)` and `padding-block-end: env(safe-area-inset-bottom)` to `.site-header`, `.site-footer` and `.page-content`, behind `@supports (padding: env(safe-area-inset-left))`. Insets are `0` on devices without a notch, so this is inert everywhere else. ## Done when - In landscape on a notched device, no navigation link, no language switcher and no footer link is clipped by the notch or a rounded corner. - Nothing changes on a device without safe-area insets. Part of gitborg/gitborg-docs#67.

supernaut lade till etiketterna

area/web

ready-for-implementation

type

bug

2026-08-02 12:31:27 +00:00

~~supernaut refererade till detta ärende från bitborg/bitborg-docs 2026-08-02 12:32:47 +00:00~~

Small-screen portal experience: reflow, target size and navigation accessibility #67

supernaut lade till detta till projektet Bitborg Web

2026-08-02 12:34:25 +00:00

supernaut refererade till detta ärende från en incheckning

2026-08-02 15:50:42 +00:00