DBPage, DBHeader, DBDrawer do not respect iOS safe areas in standalone PWA mode

[d-koppenhagen]

Bug Description

DBPage, DBHeader, and DBDrawer do not respect iOS safe areas (env(safe-area-inset-*)) when running as an installed PWA in standalone mode. This causes:

1. Content renders behind the Dynamic Island / notch — the DBHeader does not reserve space for env(safe-area-inset-top).
2. Content at the bottom is cut off by the Home Indicator — the DBPage height does not account for env(safe-area-inset-bottom), leaving a white gap below the app content.
3. DBDrawer content is clipped — when the navigation drawer is open, the bottom items are hidden behind the Home Indicator because neither top nor bottom safe areas are considered.

These issues only occur in display-mode: standalone (PWA installed to Home Screen). In Safari browser mode, the browser chrome already handles safe areas, so no issue is visible.

Prerequisites

The HTML includes viewport-fit=cover and Apple PWA meta tags:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Workaround

We override the following styles scoped to standalone mode:

@media all and (display-mode: standalone) {
    html,
    body {
        height: 100lvh;
        overflow: hidden;
    }

    .db-page[data-variant="fixed"] {
        block-size: 100lvh;
    }

    .db-header {
        padding-top: env(safe-area-inset-top);
    }

    .db-header-drawer {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

Key insight: 100lvh (Large Viewport Height) is needed because 100%, 100vh, and 100dvh all exclude the Home Indicator area on iOS in standalone mode.

Expected Behaviour

When viewport-fit=cover is set and the app runs in standalone mode:

1. DBHeader should add padding-top: env(safe-area-inset-top) so content does not render behind the Dynamic Island / notch.
2. DBPage[variant="fixed"] should use 100lvh instead of 100% for its height, ensuring the app fills the entire physical screen.
3. DBDrawer (.db-header-drawer) should respect both env(safe-area-inset-top) and env(safe-area-inset-bottom) so content is not clipped by system UI.
4. These adjustments should only apply in @media all and (display-mode: standalone) to avoid side effects in normal browser usage.

Suggestion

DB UX could handle this by adding a standalone media query block in the component CSS for DBPage, DBHeader, and DBDrawer that applies safe-area insets automatically when viewport-fit=cover is detected. This would make DB UX PWA-ready out of the box.

Environment

• Device: iPhone 16 Pro (iOS Simulator, iOS 18.0)
• Mode: Standalone PWA (Add to Home Screen)
• DB UX version: @db-ux/core-components (latest as of June 2026)
• Framework: React (TanStack Start), but issue is framework-agnostic (CSS-level)