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).