Skip to content

feat(v1.46): touch-feel baseline + 44px tap targets - #66

Open
MP2EZ wants to merge 1 commit into
devfrom
feat/v1.46-mobile-touch-polish
Open

feat(v1.46): touch-feel baseline + 44px tap targets#66
MP2EZ wants to merge 1 commit into
devfrom
feat/v1.46-mobile-touch-polish

Conversation

@MP2EZ

@MP2EZ MP2EZ commented Jun 14, 2026

Copy link
Copy Markdown
Owner

First slice (Themes B + C) of the post-TestFlight mobile-polish pass for the Capacitor iOS shell. Audit-driven; scoped so desktop web is byte-identical — changes are either inert on pointer devices or gated behind `@media (hover: none)`.

Theme B — touch feel (global, no-op on desktop)

  • `touch-action: manipulation` → removes the 300ms double-tap-zoom delay
  • `-webkit-tap-highlight-color: transparent` → kills the gray iOS tap flash
  • `-webkit-touch-callout: none` + `user-select: none` on UI chrome → no long-press callout / accidental text selection on buttons
  • `:active` opacity feedback → touch has no `:hover`, so taps had zero visual confirmation before this

Theme C — tap-target sizing (`@media (hover: none)`, ≥44px per Apple HIG / WCAG 2.5.8)

  • Date-picker days, save-to-trip / share / watch-action / watch-cta / header / tag buttons, book/map card links → min 44px
  • watch-close, compare-close → 44px square
  • compare-check keeps its 24px visual; a transparent `::after` overlay extends the hit area to 44px
  • Dense calendar-heatmap cells intentionally excluded (per CLAUDE.md) — their hit area is handled by cell spacing, not by inflating every cell

Verification

  • `npm run build` clean
  • 213/213 frontend tests pass
  • Pure CSS; +83 lines, one file (`web/src/App.css`)

Not in this PR (next slices)

  • A — safe-area completeness incl. the known status-bar scroll-bleed follow-up + modal safe-area/scroll-lock
  • D — responsive layout gaps (search-form/poll grids, MapView mobile, modal widths)
  • E — keyboard handling (needs `@capacitor/keyboard`)

🤖 Generated with Claude Code

Themes B+C of the post-TestFlight mobile-polish pass. All changes are
either globally inert on pointer devices or scoped to @media (hover:none),
so desktop web rendering is byte-identical; only the Capacitor WKWebView
(and touch web) sees them.

Touch baseline (global, no-op on desktop):
- touch-action: manipulation — removes the 300ms double-tap-zoom delay
- -webkit-tap-highlight-color: transparent — kills the gray iOS tap flash
- -webkit-touch-callout: none + user-select: none on UI chrome — no
  long-press callout / accidental selection on buttons
- :active opacity feedback — touch has no :hover, so taps had no
  visual confirmation

Tap-target sizing (@media hover:none, ≥44px per Apple HIG / WCAG 2.5.8):
- drp-day, save-to-trip/share/watch-action/watch-cta/header/tag buttons,
  book/map card links → min 44px
- watch-close, compare-close → 44px square
- compare-check keeps its 24px visual; transparent ::after overlay
  extends the hit area to 44px
- dense calendar-heatmap cells intentionally excluded (CLAUDE.md) —
  spacing handles their hit area

Build clean, 213/213 frontend tests pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant