Issue 3: 📱 Mobile Experience - Touch Targets & Control Optimization

[arii]

Description
The current ControlPanel controls are too small for reliable mobile usage during workouts. We need to implement "fat finger" friendly buttons and clearer interactions.

Technical Specs

• File: app/client/control/components/TimerControls.tsx
• Button Height: Minimum 64px.
• Interaction: Add active state scaling (scale(0.95)).
• Steppers: Increase IconButton touch area to 56px.

Tasks

• Refactor TimerControls.tsx buttons to use the new minHeight and styling.
• Implement the "press" animation effect (using sx transform or Framer Motion).
• Increase size of Stepper (+/-) buttons.
• Verify layout does not break on iPhone SE / small Android viewports.

Labels: frontend, mobile, accessibility
Priority: P1 - High

---

[google-labs-jules]

Jules is on it. When finished, you will see another comment and be able to review a PR.

[google-labs-jules]

Ready for a review! A PR has been created.