PROG-81 — mobile audit: collapse board filters + 44px touch targets#52
Merged
Conversation
…bile A rendered phone audit (WebKit @360/390/430, touch emulation) found the board's six filter dropdowns + New-issue button + two toggles filled the entire first viewport, pushing the cards — the point of the page — below the fold. On a 844px phone you saw zero board content before scrolling. On phones (< sm) the filter row now collapses behind a "Filters" disclosure, collapsed by default with a badge counting active filters/toggles, so three cards sit above the fold. At sm+ the row stays inline and desktop is byte-identical (verified: toggle hidden, six selects inline at 1440px). Also bump the board's own New-issue and Show-backlog/Show-sub-issues buttons to a >=44px row on mobile (min-h-11, reverting at sm) — they were ~31px, under the touch floor.
The audit measured the header New button at ~34px, the account avatar at 32px, and both dropdown menus' rows (New menu, Admin, Sign out) at ~31px — all under the 44px touch floor, in the hardest-to-reach top chrome. Give each a >=44px target on mobile (min-h-11 / h-11 w-11 on the avatar), reverting to the compact desktop sizing at sm+. Restore the space before the (C)/dropdown caret that the new inline-flex would otherwise collapse.
…obile The Move… / Change… / Edit… / Copy-as-prompt / Copy-CLI links in the issue aside rendered ~19px tall. They carry keyboard shortcuts (M/A/T/W) on desktop, but on a phone tapping the link is the ONLY way to fire them — so a 19px target is a real miss. Factor the shared styling into FIELD_ACTION_CLS: a >=44px flex row on mobile (flex is block-level, so each link keeps its own line as block did), reverting to the compact block layout at sm+. Add ml-1 to the (M)/(A)/(T)/(W) shortcut hints so the flex row keeps the space.
Append the PROG-81 decision entry summarizing the rendered phone audit: the three fixes made (board filter collapse, header targets, issue field links) and the two low-severity items deliberately deferred (tablet-range select font-size, tab-bar translucency bleed).
bryankennedy
approved these changes
Jul 4, 2026
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.
Addresses PROG-81 — an overall audit of the phone experience using the
mobile-first-auditskill (rendered WebKit at 360/390/430/768 with touch emulation + the skill's probe script, not just code reading).Verdict
The app is broadly solid on a phone — correct
viewport-fit=covermeta, zoom enabled, 19px body text,pb-24clears the bottom tab bar, no page-level horizontal overflow. Recent PROG-45/PROG-79 work holds up. Three things were worth fixing.Fixes (each grounded in a rendered screenshot / measurement)
[H1] Board filters buried the board below the fold
The 6 filter dropdowns + New-issue + 2 toggles filled the entire first viewport; you scrolled past all of it before seeing a single card. → On phones (
< sm) the filter row collapses behind a "Filters" disclosure (collapsed by default, badge = active filter count). Three cards now sit above the fold. Desktop is byte-identical (row always inline atsm+; verified toggle hidden + 6 selects inline at 1440px).[H2] Issue field-edit links were 19px
Move…/Change…/Edit…/Copy as prompt/Copy CLI— on a phone, tapping these is the only way to fire them (the M/A/T/W shortcuts don't exist on touch). → SharedFIELD_ACTION_CLSgives each a ≥44px flex row on mobile, compact block layout atsm+ (measured 53px after).[M1] Header touch targets under 44px
New button (~34px), avatar (32px), dropdown rows (~31px), board New-issue/toggle buttons (~31px) → all bumped to ≥44px on mobile via
min-h-11, reverting atsm+.Deferred (noted, low severity, kept out to stay focused)
<select>s render at 14.4px → possible iOS zoom-on-focus (the global 16px rule stops at 639px).Verification
Re-ran the audit harness before/after: board mobile small-targets 6→1, issue 12→5, desktop unchanged.
tsc -bclean, 84 unit tests pass. Documented indocs/REFERENCE.md(board) anddocs/DECISIONS.md(### PROG-81).