Skip to content

feat: mobile polish — tap feedback, accessibility, PWA manifest#183

Open
prazgaitis wants to merge 1 commit into
mainfrom
web-best-practice
Open

feat: mobile polish — tap feedback, accessibility, PWA manifest#183
prazgaitis wants to merge 1 commit into
mainfrom
web-best-practice

Conversation

@prazgaitis

Copy link
Copy Markdown
Owner

Summary

  • Tap interaction quality: Added -webkit-tap-highlight-color: transparent (no blue flash), touch-action: manipulation (no 300ms delay), and active: press states on all mobile nav items, feed tabs, and activity cards
  • Accessibility: Removed maximumScale: 1 viewport restriction that blocked pinch-to-zoom (WCAG violation), added prefers-reduced-motion support to disable all animations for motion-sensitive users
  • PWA support: Added web app manifest for Add to Home Screen, apple-mobile-web-app-capable meta, and theme-color for native-feel browser chrome
  • Hydration fix: Rewrote useIsMobile to use useSyncExternalStore with a server snapshot, eliminating the layout flash where mobile UI briefly renders as desktop
  • Performance: Activity feed cards now use <article> elements with content-visibility: auto for lazy rendering, overscroll-behavior: none prevents pull-to-refresh interference, and feed filter tabs enforce min-h-[44px] touch targets

Test plan

  • Verify no blue tap flash on iOS Safari when tapping nav items and feed cards
  • Verify pinch-to-zoom works on all pages
  • Verify feed tab active states show press feedback on mobile
  • Test Add to Home Screen flow on iOS and Android
  • Verify prefers-reduced-motion disables animations (enable in OS accessibility settings)
  • Verify no hydration mismatch warnings in console on mobile

🤖 Generated with Claude Code

- Add -webkit-tap-highlight-color: transparent to suppress blue tap flash
- Add touch-action: manipulation on interactive elements (no 300ms delay)
- Add overscroll-behavior: none to prevent pull-to-refresh interference
- Add prefers-reduced-motion support to disable animations for sensitive users
- Remove maximumScale: 1 from viewport (was blocking pinch-to-zoom, WCAG issue)
- Add theme-color meta and apple-mobile-web-app-capable for native-feel chrome
- Add web app manifest (manifest.ts) for Add to Home Screen support
- Fix useIsMobile SSR hydration flash using useSyncExternalStore
- Use <article> for feed cards with content-visibility: auto for render perf
- Add active:bg/active:opacity press states on all mobile nav items and feed tabs
- Enforce min-h-[44px] on feed filter tabs for touch target compliance
- Add smooth scroll-behavior with reduced-motion fallback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Mar 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
march-fitness-2025 Error Error Mar 8, 2026 4:32am

Request Review

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