From c8d7b055d76eb26f8a47939d3bb92b06d90a1fc2 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Fri, 8 May 2026 13:18:30 -0400
Subject: [PATCH] =?UTF-8?q?sky.html:=20clip=20horizontal=20overflow=20on?=
 =?UTF-8?q?=20iOS=20Firefox=20=E2=80=94=20.sky-page=20overflow-x:hidden=20?=
 =?UTF-8?q?+=20min-width:0=20on=20.sky-field=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

iOS Firefox renders <input type="date"> & <input type="time"> with a native widget whose minimum content width can exceed .sky-form-main on narrow phones, spilling past the form column & triggering page-level horizontal scroll. Two defensive layers: (1) min-width:0 on .sky-field input lets the native widget shrink below its intrinsic content width; (2) overflow-x:hidden on .sky-page clips anything that still slips past — the aperture is the snap scroll container so this only affects the column-stack direction we don't want anyway. body.page-sky already has overflow:hidden but iOS Firefox doesn't always honor it for native form controls.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/static_src/scss/_sky.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss
index 3622988..b66ad26 100644
--- a/src/static_src/scss/_sky.scss
+++ b/src/static_src/scss/_sky.scss
@@ -199,6 +199,11 @@ html.sky-open .sky-modal-wrap {
     // priUser fill, secUser gold border + text, pill rounding, terUser focus glow.
     input {
         width: 100%;
+        // min-width:0 lets the input shrink below its native content-width on
+        // iOS Firefox, which gives <input type="date|time"> widgets a fixed
+        // minimum that would otherwise spill past .sky-form-main on narrow
+        // phones & trigger horizontal page scroll.
+        min-width: 0;
         background-color: rgba(var(--priUser), 1);
         color: rgba(var(--secUser), 1);
         border: 0.1rem solid rgba(var(--secUser), 0.5);
@@ -921,7 +926,11 @@ body.page-sky {
     }
 }
 
-// Sky page fills the aperture; its content can scroll past the bottom edge
+// Sky page fills the aperture; its content can scroll past the bottom edge.
+// overflow-x: hidden clips any horizontal overflow that would otherwise create
+// page-level horizontal scroll on iOS Firefox — html/body overflow:hidden on
+// page-sky doesn't always catch native <input type="date|time"> widgets whose
+// minimum content width exceeds the form column on narrow phones.
 .sky-page {
     position: relative;
     flex: 1;
@@ -929,6 +938,7 @@ body.page-sky {
     display: flex;
     flex-direction: column;
     overflow-y: auto;
+    overflow-x: hidden;
 }
 
 // DEL btn pinned at the wheel center — only rendered when chart_data exists.