Core mobile controls (QuickCapture close/voice, graph controls) are under 44px #112

New issue

Closed

opened 2026-07-15 19:52:55 +00:00 by claude-bot · 1 comment

claude-bot commented

2026-07-15 19:52:55 +00:00

Contributor

Severity: Medium · Confidence: High · Effort: S · Category: ui (accessibility)

Evidence

app/src/components/layout/QuickCapture.tsx:288-295 - close "·": no padding, ~20·20px; :271-287 - voice toggle: p-1.5 around a 16px icon, ~28·28px.
app/src/pages/Motifs/MotifGraph.tsx:119, app/src/pages/Insights/MotifNetwork.tsx:111/131, app/src/pages/Public/EmbedPage.tsx:42 - default @xyflow/react <Controls> ~26·26px.

Problem
Several primary mobile controls - the capture sheet's close button and voice toggle, and the graph zoom/pan controls - are well below the 44·44pt / 48·48dp guidance.

Impact
Mis-taps on the app's most-used mobile interaction (the capture sheet) and on the touch-driven graph pages.

Fix
Wrap icon-only buttons in ?44px hit areas (min-h-11 min-w-11); override .react-flow__controls-button size (or hide Controls on small viewports in favor of pinch-zoom).

Acceptance criteria

The named controls present ?44px touch targets on mobile.

Filed from the 2026-07-15 codebase audit. Full report: docs/.internal/report-2026-07-15.md (gitignored).

**Severity:** Medium · **Confidence:** High · **Effort:** S · Category: ui (accessibility) **Evidence** - `app/src/components/layout/QuickCapture.tsx:288-295` - close "·": no padding, ~20·20px; `:271-287` - voice toggle: `p-1.5` around a 16px icon, ~28·28px. - `app/src/pages/Motifs/MotifGraph.tsx:119`, `app/src/pages/Insights/MotifNetwork.tsx:111/131`, `app/src/pages/Public/EmbedPage.tsx:42` - default `@xyflow/react` `<Controls>` ~26·26px. **Problem** Several primary mobile controls - the capture sheet's close button and voice toggle, and the graph zoom/pan controls - are well below the 44·44pt / 48·48dp guidance. **Impact** Mis-taps on the app's most-used mobile interaction (the capture sheet) and on the touch-driven graph pages. **Fix** Wrap icon-only buttons in ?44px hit areas (`min-h-11 min-w-11`); override `.react-flow__controls-button` size (or hide Controls on small viewports in favor of pinch-zoom). **Acceptance criteria** - [ ] The named controls present ?44px touch targets on mobile. --- _Filed from the 2026-07-15 codebase audit. Full report: `docs/.internal/report-2026-07-15.md` (gitignored)._

claude-bot added this to the v7.3.0 - UI, mobile & accessibility milestone

2026-07-15 19:52:55 +00:00

claude-bot added the

enhancement

label

2026-07-15 19:52:55 +00:00

claude-bot referenced this issue

2026-07-16 22:04:19 +00:00

Import, Suggestions, and Trash are unreachable on mobile #89

rbrooks referenced this issue from a commit

2026-07-17 22:48:57 +00:00

feat(v7.3.0): UI, mobile & accessibility milestone

claude-bot commented

2026-07-17 23:14:18 +00:00

Author

Contributor

Icon-only capture controls (close, voice toggle) are now >=44px hit areas, and the @xyflow/react graph zoom/pan controls are enlarged to 44px on touch via a pointer: coarse CSS override.

Shipped in 59e4fdd (test fix 6561f9a), part of the v7.3.0 milestone. Verified on dev (v7.2.1-3-g6561f9a): app suite 65/65 and api suite 268/268 green on the dev server; the one CI red was the known runner flake (iac#159), not this change.

Icon-only capture controls (close, voice toggle) are now >=44px hit areas, and the @xyflow/react graph zoom/pan controls are enlarged to 44px on touch via a `pointer: coarse` CSS override. Shipped in `59e4fdd` (test fix `6561f9a`), part of the v7.3.0 milestone. Verified on dev (`v7.2.1-3-g6561f9a`): app suite 65/65 and api suite 268/268 green on the dev server; the one CI red was the known runner flake (iac#159), not this change.

claude-bot closed this issue

2026-07-17 23:14:18 +00:00