Task #460: Hide iPad Safari URL bar on short pages too

Followup to #459. After that fix, Notes/Home no longer had
overflow-hidden, but the user reported the URL bar still didn't
collapse on Notes (when few notes), Services, or Notifications.

Root cause: iOS Safari only collapses its URL bar when the document
is actually scrollable. Services (small grid), Notifications (short
list), and Notes-when-empty all fit within the viewport on iPad, so
there's no scroll trigger. Executive Meetings worked only because
its schedule list always overflows.

Fix (touch-only, single CSS rule in index.css @layer base):
  @media (hover: none) and (pointer: coarse) {
    html, body { min-height: calc(100svh + 1px); }
  }

Why 100svh: it's the viewport-with-URL-bar-visible height, so the
+1px gap stays constant regardless of whether the bar is shown or
hidden — no oscillation. Why touch-only media query: keeps desktop
browsers from showing a stray scrollbar on short pages. Universal
fix — applies to every page automatically, no per-page edits.

Out of scope (per task): no PWA install meta, no per-page changes,
no styling changes. Pre-existing `test` workflow failure on
unrelated executive-meetings.ts type errors is not addressed here.
This commit is contained in:
Riyadh
2026-05-10 11:33:44 +00:00
parent 7d269a52b4
commit 4dcfcf1d5e
+23
View File
@@ -118,6 +118,29 @@
body {
overflow-x: clip;
}
/*
* #460: On iOS Safari (iPad/iPhone), the URL bar only auto-collapses
* when the document is actually scrollable. Pages with short content
* (Services grid, Notifications list, an empty Notes tab, etc.) fit
* entirely within the viewport, so Safari has no scroll trigger and
* the URL bar stays pinned — wasting screen real estate.
*
* We force the document to always be ~1px taller than the small
* viewport (`100svh` = the viewport height *with* the URL bar
* visible, so the +1px gap stays constant whether the bar is shown
* or hidden). That tiny extra height is enough for Safari to enable
* its URL-bar-collapse gesture on every page.
*
* Scoped to touch devices via `(hover: none) and (pointer: coarse)`
* so desktop browsers never get a stray scrollbar on short pages.
*/
@media (hover: none) and (pointer: coarse) {
html,
body {
min-height: calc(100svh + 1px);
}
}
}
/* Soft glassmorphism — light, very subtle blur */