Merge pull request #66 from MrSuttonmann/ios-pwa-detail-panel-safe-area

Fix iOS PWA safe-area insets on detail panel, dialogs, mobile chrome

Author: MrSuttonmann

CLAUDE.md

@@ -199,6 +199,47 @@ Do not introduce `document.write`, and do not build a parallel
 sanitiser; `escapeHtml` is the one primitive. If you find yourself
 reaching for `DOMPurify` or similar, stop and ask.
 
+### Frontend: iOS PWA safe-area insets
+
+The site is installable as a standalone PWA
+(`apple-mobile-web-app-capable=yes`,
+`viewport-fit=cover`), which means content paints under the iPhone
+notch / status bar / home indicator. Any surface that pins to a
+viewport edge on mobile MUST factor in `env(safe-area-inset-*)` or
+its controls will sit under hardware that the user can't tap through.
+
+Pattern, in order of preference:
+
+1. **Pad the surface** that contains the controls — e.g.
+   `#sidebar { padding-top: env(safe-area-inset-top); }`,
+   `#sidebar-footer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }`.
+   This is the cleanest fix because the surface still extends
+   visually behind the notch (background colour fills the gap) but
+   its children stay in the safe area.
+2. **Offset position** when the element is `position: fixed`/`sticky`
+   without a useful parent — e.g.
+   `body.compact-mode .leaflet-top { top: env(safe-area-inset-top); }`,
+   `#toast-host { top: calc(56px + env(safe-area-inset-top)); }`.
+3. **Shrink centred elements** so `margin: auto` keeps them inside
+   the safe area — `<dialog>` uses
+   `max-height: calc(100dvh - 20px - 2 * max(env(safe-area-inset-top), env(safe-area-inset-bottom)))`.
+   The `2 * max(...)` is right because `margin: auto` on a centred
+   block puts equal space above and below; we need that half-margin
+   to be ≥ the larger inset, so the total reduction is twice that.
+
+Sticky elements (`#detail-header`, dialog `.about-close-form`)
+ignore ancestor padding — apply padding *to the sticky element
+itself* so its content shifts. The `padding-top: calc(6px +
+env(safe-area-inset-top))` pattern on `#detail-header` is the
+canonical example.
+
+When adding any new fullscreen mobile surface (anything that uses
+`inset: 0`, `position: fixed; top: 0`, full-viewport `<dialog>`,
+etc.), audit it against the four insets before merging. Test on a
+notched device (or the iPhone Pro simulator in Safari devtools) in
+PWA standalone mode — the browser tab itself reserves space for
+the status bar so the bug only manifests once installed.
+
 ### BEAST wire format (`dotnet/src/FlightJar.Decoder/Beast/BeastFrameReader.cs`)
 
 Frames are `0x1A <type> <6B MLAT ts> <1B sig> <msg>`, where any `0x1A` in

app/static/app.css

@@ -650,7 +650,9 @@
      sit above every other surface (tooltips, dialogs, overlays).
      The host itself is click-through (pointer-events:none); each
      toast re-enables events so click-to-dismiss still works. */
-  #toast-host { position: fixed; top: 56px; right: 14px; z-index: 10001;
+  #toast-host { position: fixed;
+                top: max(56px, calc(env(safe-area-inset-top) + 12px));
+                right: calc(14px + env(safe-area-inset-right)); z-index: 10001;
                 display: flex; flex-direction: column; gap: 10px;
                 pointer-events: none; max-width: 360px; }
 
@@ -825,6 +827,15 @@
       border-radius: 0 0 11px 11px;
       border-top: 0;
     }
+    /* Compact mode hides the sidebar/footer so the map fills the
+       viewport — Leaflet's zoom / layers / home / follow buttons live
+       at top:0 / bottom:0 of the map, which on iOS PWA puts them
+       under the notch and home indicator. Pad the four corner
+       containers so every Leaflet control clears the safe area. */
+    body.compact-mode .leaflet-top { padding-top: env(safe-area-inset-top); }
+    body.compact-mode .leaflet-bottom { padding-bottom: env(safe-area-inset-bottom); }
+    body.compact-mode .leaflet-left { padding-left: env(safe-area-inset-left); }
+    body.compact-mode .leaflet-right { padding-right: env(safe-area-inset-right); }
     #sidebar-handle svg {
       display: block; color: var(--muted);
       transition: transform 0.22s ease, color 0.15s ease;
@@ -834,4 +845,16 @@
     body.compact-mode #sidebar-handle svg { transform: scaleY(-1); }
     #sidebar-handle:hover svg,
     #sidebar-handle:active svg { color: var(--text); }
+    /* Compact mode hides the sidebar so the map fills the viewport.
+       Leaflet's top-anchored controls and the toast stack default to
+       y≈10px / 56px from the top edge, which on iOS PWA standalone
+       lands under the status bar / notch. Nudge them down by the safe-
+       area inset so the zoom buttons, layer toggle, and toasts stay
+       reachable. */
+    body.compact-mode .leaflet-top {
+      top: env(safe-area-inset-top);
+    }
+    body.compact-mode #toast-host {
+      top: calc(56px + env(safe-area-inset-top));
+    }
   }

app/static/detail_panel.css

@@ -418,4 +418,20 @@
     /* Compact mode's `left: 10px` desktop override shouldn't fight the
        full-viewport mobile overlay. */
     body.compact-mode #detail-panel { left: 0; }
+    /* iOS PWA standalone runs the panel to the physical edges of the
+       device, so the sticky header lands under the notch / status bar
+       and the home indicator overlaps the bottom of the content. Pad
+       inner surfaces with safe-area insets so every interactive control
+       stays reachable. The header's own padding is what pushes the
+       close button down — sticky positioning ignores ancestor padding. */
+    #detail-header {
+      padding-top: calc(6px + env(safe-area-inset-top));
+      padding-left: calc(6px + env(safe-area-inset-left));
+      padding-right: calc(6px + env(safe-area-inset-right));
+    }
+    #detail-content {
+      padding-left: calc(14px + env(safe-area-inset-left));
+      padding-right: calc(14px + env(safe-area-inset-right));
+      padding-bottom: calc(14px + env(safe-area-inset-bottom));
+    }
   }

app/static/dialogs.css

@@ -393,14 +393,18 @@
      first child <form> — pin it so it stays reachable while the body
      scrolls underneath. `100dvh` tracks the *visible* viewport on
      mobile browsers (excludes the URL bar) so the dialog actually
-     fits when the browser chrome is onscreen. */
+     fits when the browser chrome is onscreen. The safe-area subtraction
+     keeps the centered <dialog> out from under the iOS notch / home
+     indicator in PWA standalone mode — `margin: auto` puts equal space
+     above and below, so we shrink by 2× the larger inset to guarantee
+     both edges clear. */
   #about-dialog,
   #stats-dialog,
   #watchlist-dialog,
   #alerts-dialog,
   #airspace-filters-dialog,
   #map-key-dialog {
-    max-height: calc(100dvh - 20px);
+    max-height: calc(100dvh - 20px - 2 * max(env(safe-area-inset-top), env(safe-area-inset-bottom)));
     overflow-y: auto;
     overscroll-behavior: contain;
   }