@nzz/et-components-safe-zones

Features

--safe-zone-block-start
--safe-zone-block-end

Adds safe zone variables for Android/iPhone app that should tell you how much header and footer space is covered by NZZ or the app but still inside the viewport (vh).

We already receive them from the website (after migration 2025), e.g. in browsers on mobile devices when scrolling up. This means, when they are missing, they are meant to be 0, but in the apps it's different (maybe because the apps have not been migrated yet).

Highly temporary because we want to receive these variables from the website.

Usage

Install

npm install @nzz/et-components-safe-zones

Add safe zone variables

<app-container
  {@attach setMarginProperty(SafeZone.Header)}
  {@attach setMarginProperty(SafeZone.Footer)}
>

Use safe zone variables

padding-top: var(--safe-zone-block-start);
padding-bottom: var(--safe-zone-block-end);