fix(mobile): mobile-first audit — touch-size form controls + reorder issue fields#45
Merged
Conversation
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.
…meline 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.
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).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Mobile-first audit
A rendered phone-viewport audit (360 / 390 / 430 / 768 + 1440 desktop regression, with touch + DPR emulation) of the highest-traffic views — Board, Issue page, New-issue dialog, Agenda, Structure — following the bottom-tab-bar nav (PROG-79). Every finding is grounded in a screenshot + measured probe, not a code read.
Verdict: after PROG-79 the app is usable one-handed with no horizontal-scroll or off-screen-CTA defects — but every form control triggered iOS zoom-on-focus and sat under the 44px touch floor, and the issue page buried its primary action fields under a long activity log. Those are fixed here.
Blocking — none
PROG-79 removed the top-nav overflow; the board's horizontal scroll is contained to its own
overflow-x-autostrip (intentional, D30); the page itself doesn't scroll sideways; the new-issue modal fits at 360px with Cancel/Create reachable; viewport meta is correct (viewport-fit=cover, zoom enabled).High — fixed
text-xs= 14.4px < 16px, so focusing any select/date field makes iOS Safari zoom in and stay zoomed. Fixed with a global@media (max-width:639px)rule forcing form controls to 16px (unlayered so it beats Tailwind'stext-xsutility). Probe verified:smallInputs=0at 360/390/430.flex-col md:flex-rowstacked the field strip (Status/Priority/Estimate/Due/Container/Arc/Tags) after the description and the full activity timeline — so on a heavily-edited issue you scrolled past dozens of rows to change status. Rebuilt as a CSS grid: mobile flows description → fields → timeline; desktop is byte-identical (content left, fields right). Verified at 390 (fields now directly under the description) and 1440 (unchanged).min-height:44px(never shrinks taller fields like the comment box). Verified: zero sub-44 form controls at 390 across all audited views.Medium / Low — documented, deferred (to keep this PR tight)
+ Product / + Arc / + Repobuttons ~26px (low-frequency curation).Hard calls (mobile-first)
<select>markup (Agenda, the dialog) that a shared-component fix would miss, and prevents drift. Costs the dense desktop nothing (scoped to ≤639px).orderhacks — mobile reorders, desktop stays identical.Verification
tsc -bclean;bun run test→ 84 pass. Re-rendered the full phone matrix after fixing:smallInputs=0and zero sub-44 form controls at 360/390/430; issue fields above the timeline on mobile; desktop issue + board unchanged.