From 4dcfcf1d5e8db911beb5d51050e5afb81f7967ca Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Sun, 10 May 2026 11:33:44 +0000
Subject: [PATCH] Task #460: Hide iPad Safari URL bar on short pages too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 artifacts/tx-os/src/index.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/artifacts/tx-os/src/index.css b/artifacts/tx-os/src/index.css
index 34bce025..40aa84b3 100644
--- a/artifacts/tx-os/src/index.css
+++ b/artifacts/tx-os/src/index.css
@@ -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 */