From a28bf06a6e119567132d2302f7e27d62865d1f8a Mon Sep 17 00:00:00 2001
From: bkennedy <bryan@mysteryexperience.com>
Date: Tue, 30 Jun 2026 17:51:06 +0000
Subject: [PATCH 1/3] fix(mobile): size form controls for touch below the sm
 breakpoint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A rendered phone-viewport audit found every dense (text-xs) form control —
the board/agenda/search filters, the new-issue dialog, the issue sidebar —
rendering at 14.4px, under the 16px floor below which iOS Safari zooms-on-focus
and stays zoomed; many were also ~36px tall, under the 44px touch target floor.

Add one rule in @media (max-width: 639px): input/select/textarea get
font-size:16px and min-height:44px (checkboxes/radios excepted; min-height never
shrinks a taller field like the comment box). One global rule covers surfaces
with bespoke <select> markup that a per-component fix would miss, and prevents
drift. It's unlayered on purpose — Tailwind's text-xs utility sits in a cascade
layer, and unlayered rules win over any layer regardless of specificity, so the
element selector takes effect without !important. Scoped to phones so the dense
desktop sizing is untouched.
---
 src/client/styles.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/client/styles.css b/src/client/styles.css
index b13ab70..8c424f6 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -105,6 +105,28 @@
   min-height: 100dvh;
 }
 
+/* iOS Safari auto-zooms when a focused form control has font-size < 16px, then
+   leaves the page zoomed — jarring and constant on a phone. Our dense filter
+   and dialog controls use `text-xs` (14.4px here), so on small screens force
+   every form control to 16px. Desktop keeps the compact sizing (≥sm). Mobile
+   audit. Unlayered on purpose: it must beat Tailwind's `text-xs` utility, and
+   cascade layers lose to unlayered rules regardless of selector specificity. */
+@media (max-width: 639px) {
+  input,
+  select,
+  textarea {
+    font-size: 16px;
+  }
+  /* Meet the 44px touch-target floor on phones: the dense filter/sidebar/dialog
+     controls render ~36–40px from their compact `py-1`. min-height never shrinks
+     a taller field (e.g. the comment textarea), so it's safe to apply broadly. */
+  input:not([type="checkbox"]):not([type="radio"]),
+  select,
+  textarea {
+    min-height: 44px;
+  }
+}
+
 /* Minimal Markdown typography (Tailwind preflight strips element defaults).
    Used for issue descriptions and comments; intentionally lighter than the
    official typography plugin — one more dependency we don't need yet. */

From 183388e52067c17aa57059ea92843d9b3eb8251c Mon Sep 17 00:00:00 2001
From: bkennedy <bryan@mysteryexperience.com>
Date: Tue, 30 Jun 2026 17:51:06 +0000
Subject: [PATCH 2/3] refactor(mobile): surface the issue field strip above the
 activity timeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a phone the issue layout (flex-col md:flex-row) stacked the field aside —
Status/Priority/Estimate/Due/Container/Arc/Tags/Work-on-this — after both the
description and the full comments+activity timeline, so on a heavily-edited
issue you scrolled past dozens of activity rows just to change status.

Rebuild the layout as a CSS grid: the single-column mobile flow follows source
order (description → field strip → timeline), while desktop pins content to the
left column across both rows and the fields to the right column via explicit
col-start/row-start/row-span — leaving the desktop view unchanged. Avoids
duplicating the timeline behind hidden/md:hidden (double mount) and flex order
hacks that can't express the desktop two-row right column cleanly.
---
 src/client/pages/IssuePage.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/client/pages/IssuePage.tsx b/src/client/pages/IssuePage.tsx
index 74a3b89..9847be5 100644
--- a/src/client/pages/IssuePage.tsx
+++ b/src/client/pages/IssuePage.tsx
@@ -122,8 +122,14 @@ export default function IssuePage({
         </h1>
       </header>
 
-      <div className="mt-6 flex flex-col gap-8 md:flex-row">
-        <div className="min-w-0 flex-1">
+      {/* Mobile-first ordering (mobile audit): description → field strip →
+          timeline, so the primary actions (status/priority/due/…) aren't buried
+          under a potentially long activity history on a phone. A grid pins the
+          desktop layout (content in the left column across both rows, fields in
+          the right column) while the single-column mobile flow just follows
+          source order. */}
+      <div className="mt-6 grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_14rem]">
+        <div className="min-w-0 md:col-start-1 md:row-start-1">
           <EditableMarkdown
             value={issue.description}
             placeholder="Add a description…"
@@ -132,10 +138,9 @@ export default function IssuePage({
               updateIssue(issue.id, { description }, { toastOnError: false })
             }
           />
-          <TimelineSection issue={issue} workspace={workspace} />
         </div>
 
-        <aside className="w-full shrink-0 space-y-4 md:w-56">
+        <aside className="w-full space-y-4 md:col-start-2 md:row-start-1 md:row-span-2">
           <Field label="Status">
             <FieldSelect
               value={issue.status}
@@ -240,6 +245,10 @@ export default function IssuePage({
             {issue.completedAt && <p>Completed {fmtTime(issue.completedAt)}</p>}
           </div>
         </aside>
+
+        <div className="min-w-0 md:col-start-1 md:row-start-2">
+          <TimelineSection issue={issue} workspace={workspace} />
+        </div>
       </div>
     </div>
   );

From a04ab68dd34e8bb18e2dccdd04596255e5d913dd Mon Sep 17 00:00:00 2001
From: bkennedy <bryan@mysteryexperience.com>
Date: Tue, 30 Jun 2026 17:51:06 +0000
Subject: [PATCH 3/3] docs: record the mobile-first audit decisions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add the audit's two opinionated mobile-first calls to DECISIONS — the global
phone form-control sizing (16px / 44px, why global + unlayered + phone-scoped)
and the issue-page field-order grid (why a grid over duplication / flex order).
---
 docs/DECISIONS.md | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index 84d7a19..1c3f903 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -1248,3 +1248,42 @@ on small screens, not by trimming destinations.
   the iOS home indicator. *Rejected:* a hamburger menu (hides the active state
   the issue wants kept visible) and a 6-tab bar (too cramped with text labels on
   a narrow phone).
+
+### Mobile-first audit — phone form controls + issue-page field order
+
+A rendered phone-viewport audit (360/390/430/768 + desktop regression, touch +
+DPR emulation) of the highest-traffic views, following the bottom-tab-bar nav
+(PROG-79). No blocking defects remained — no horizontal page scroll, correct
+viewport meta, the new-issue modal fits at 360 px — but two systemic touch
+problems and one layout-order problem surfaced and are fixed. (M/L findings —
+small issue-page text-links, Structure `+add` buttons, keyboard-hint clutter —
+are recorded in the audit report but deferred to keep this change tight.)
+
+- **Form controls are sized for touch on phones, globally.** Every `text-xs`
+  control (board/agenda/search filters, the new-issue dialog, the issue sidebar)
+  rendered at 14.4 px, under the 16 px below which iOS Safari zooms-on-focus and
+  stays zoomed; many were also ~36 px tall, under the 44 px touch floor. Fixed
+  with one rule in `styles.css` — `@media (max-width:639px)` forcing
+  `input/select/textarea` to `font-size:16px` and `min-height:44px` (checkboxes/
+  radios excepted; `min-height` never shrinks a taller field like the comment
+  box). *Decisions within:* (1) **a single global rule, not per-component** — it
+  covers surfaces with bespoke `<select>` markup (Agenda, the dialog) that a
+  shared-component fix would miss, and prevents future drift. (2) **Unlayered on
+  purpose** — Tailwind's `text-xs` utility lives in a cascade layer, and
+  unlayered rules beat any layer regardless of specificity, so the element
+  selector wins without `!important`. (3) **Scoped to ≤639 px** (Tailwind's `sm`
+  floor) so the dense desktop sizing is untouched — mobile is primary, desktop
+  degrades to nothing here. Verified: zero sub-16 px and zero sub-44 px form
+  controls at 360/390/430 across all audited views.
+- **The issue page surfaces its action fields above the activity log on
+  mobile.** The layout was `flex-col md:flex-row`, so on a phone the field
+  `<aside>` (Status/Priority/Estimate/Due/Container/Arc/Tags/Work-on-this) stacked
+  *after* the description **and** the full comments+activity timeline — on a
+  heavily-edited issue you scrolled past dozens of activity rows to change
+  status. Rebuilt as a CSS grid: mobile (single column) flows description →
+  field strip → timeline by source order; desktop pins content to the left
+  column across both rows and the fields to the right column via explicit
+  `col-start`/`row-start`/`row-span`, leaving the desktop view byte-identical.
+  *Rejected:* duplicating `<TimelineSection>` behind `hidden`/`md:hidden` (double
+  mount) and flex `order` hacks (can't express the desktop "right column spans
+  two left-stacked rows" cleanly).