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:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user