From 942839eba7685111a65e2500341510a82ca28e9f Mon Sep 17 00:00:00 2001
From: bkennedy <bryan@mysteryexperience.com>
Date: Tue, 30 Jun 2026 19:10:23 +0000
Subject: [PATCH] fix(mobile): stop the native date input from overflowing the
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On the issue view on iOS, the page scrolled horizontally and every field ran
off the right edge. Cause: the field strip is an <aside> grid item, and grid
items default to min-width:auto — they won't shrink below their content's
intrinsic width. A native filled `<input type="date">` has a wide intrinsic
width on iOS, so it stretched the aside (and every w-full field in it) past the
viewport. (Chromium renders date inputs compactly, which is why the audit and
CI missed it.)

- Issue page: add min-w-0 to the field <aside> (so the grid track constrains it)
  and to the date input itself, pinning the native control to the column width.
- Harden globally on phones (styles.css, <=639px): give every form control
  min-width:0 + max-width:100%, so no native control (e.g. the new-issue
  dialog's date field, which sits in a flex row with the same risk) can push
  past its container.

Verified in a mobile viewport: issue page and new-issue dialog both report zero
horizontal page overflow with a due date set; desktop layout unchanged. The
iOS-specific intrinsic width isn't reproducible in headless Chromium, so the
structural min-width:0 fix needs an on-device confirm.
---
 src/client/pages/IssuePage.tsx | 12 ++++++++++--
 src/client/styles.css          | 11 +++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/client/pages/IssuePage.tsx b/src/client/pages/IssuePage.tsx
index 9847be5..091a52a 100644
--- a/src/client/pages/IssuePage.tsx
+++ b/src/client/pages/IssuePage.tsx
@@ -140,7 +140,12 @@ export default function IssuePage({
           />
         </div>
 
-        <aside className="w-full space-y-4 md:col-start-2 md:row-start-1 md:row-span-2">
+        {/* min-w-0: a grid item defaults to min-width:auto, so it won't shrink
+            below its content's intrinsic width. The native date input below has
+            a wide intrinsic width on iOS, which otherwise stretches this whole
+            column (and every w-full field in it) past the viewport — horizontal
+            overflow on a phone. min-w-0 lets the track constrain it. */}
+        <aside className="w-full min-w-0 space-y-4 md:col-start-2 md:row-start-1 md:row-span-2">
           <Field label="Status">
             <FieldSelect
               value={issue.status}
@@ -172,7 +177,10 @@ export default function IssuePage({
               type="date"
               value={issue.dueDate ?? ""}
               onChange={(e) => updateIssue(issue.id, { dueDate: e.target.value || null })}
-              className="w-full rounded border border-line bg-card px-2 py-1 text-sm hover:border-ink-faint"
+              // w-full + min-w-0: pin the native date control to the column
+              // width instead of letting its (wide, on iOS) intrinsic size win,
+              // which would overflow the page on a phone.
+              className="w-full min-w-0 rounded border border-line bg-card px-2 py-1 text-sm hover:border-ink-faint"
             />
           </Field>
           <Field label="Container">
diff --git a/src/client/styles.css b/src/client/styles.css
index 8c424f6..af3bf16 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -125,6 +125,17 @@
   textarea {
     min-height: 44px;
   }
+  /* Keep a native control from overflowing its container on a phone. Some
+     controls — notably iOS's `<input type="date">` — have a wide intrinsic
+     width; as a flex/grid item that `min-width: auto` lets them push past the
+     viewport (the issue page's field column did exactly this). min-width:0 lets
+     them shrink to their box; max-width:100% caps them at the container. */
+  input,
+  select,
+  textarea {
+    min-width: 0;
+    max-width: 100%;
+  }
 }
 
 /* Minimal Markdown typography (Tailwind preflight strips element defaults).