---
phase: 01-input-ux
plan: 03
type: execute
wave: 1
depends_on: []
files_modified:
  - frontend/src/App.css
autonomous: true

must_haves:
  truths:
    - "The back button in WorkoutPage header is at least 44px tall (tappable with one thumb)"
    - "The complete-btn (set checkmark) is at least 44px tall — already 44px, verify it is not overridden"
    - "The warmup-done-btn is at least 44px tall"
    - "Warmup items are at least 44px tall"
    - "The finish-workout-btn is at least 44px tall"
    - "The .start-btn and .start-workout-btn are at least 44px tall"
    - "All form inputs in auth and onboarding pages have font-size 16px to prevent iOS auto-zoom"
  artifacts:
    - path: "frontend/src/App.css"
      provides: "Touch target audit fixes — explicit min-height on all interactive elements"
      contains: "min-height: 44px"
  key_links: []
---

<objective>
Audit all interactive elements in App.css for touch target compliance (min 44px height) and font-size compliance (min 16px on inputs). Fix any violations with targeted CSS additions.

Purpose: Users on mobile can tap every button and input without missing. iOS auto-zoom does not trigger on any input in the app.
Output: App.css updated with min-height and font-size fixes for non-stepper elements.
</objective>

<execution_context>
@/home/intense/.claude/get-shit-done/workflows/execute-plan.md
@/home/intense/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@frontend/src/App.css
@frontend/src/index.css
</context>

<tasks>

<task type="auto">
  <name>Task 1: Audit touch targets and fix all violations in App.css</name>
  <files>frontend/src/App.css</files>
  <action>
Read App.css in full. Identify all rules that style buttons and inputs. For each, check whether height or min-height is explicitly set to at least 44px.

Elements that need fixing (based on current code review):

1. `.back-btn` — currently has `padding: 0.5rem` only. Add:
   ```css
   min-height: 44px;
   ```

2. `.warmup-item` — currently `padding: 0.75rem`. The item needs to be at least 44px tall. Add:
   ```css
   min-height: 44px;
   ```

3. `.warmup-done-btn` — currently `padding: 1rem`. Add:
   ```css
   min-height: 44px;
   ```

4. `.finish-workout-btn` — currently `padding: 1.25rem`. Add:
   ```css
   min-height: 44px;
   ```

5. `.complete-btn` — already `width: 44px; height: 44px;`. No change needed. Verify it is not overridden in any mobile media query.

6. `.start-btn` and `.start-workout-btn` — currently `padding: 1rem`. Add `min-height: 44px;` to both (or the shared rule if they share one).

7. `.tab-btn` — currently `padding: 0.75rem`. Add `min-height: 44px;`.

8. `.calendar-nav` — currently `width: 32px; height: 32px;`. This is below 44px. Update to:
   ```css
   width: 44px;
   height: 44px;
   ```

9. `.edit-btn` — currently `padding: 0.5rem 0.75rem;`. Add `min-height: 44px;`.

10. `.cancel-btn` and `.save-btn` — currently `padding: 0.75rem`. Add `min-height: 44px;`.

Font-size audit — all `<input>` elements must have font-size >= 16px:

11. In `.auth-card input` (index.css line 96) the font-size is `1rem`. 1rem = 16px by default, but it depends on root font-size. To be safe, add a rule in App.css:
    ```css
    /* Ensure all inputs have font-size >= 16px to prevent iOS auto-zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
      font-size: 16px;
    }
    ```
    Place this near the top of App.css in the first section, or append it at the end before the stepper block (if Plan 01 runs in parallel, this is fine — the stepper CSS block already has font-size: 16px on .stepper-input).

Approach:
- Edit each rule in-place by adding the missing property inside the existing rule block.
- Do NOT create new duplicate rule blocks — find the existing selector and add inside it.
- For the global input font-size rule, append it as a new block at the end.

After editing, confirm no interactive element visible on WorkoutPage or Dashboard is below 44px in height.
  </action>
  <verify>
1. grep -n "min-height: 44px" frontend/src/App.css  (should appear multiple times)
2. grep -n "font-size: 16px" frontend/src/App.css  (should appear for global input rule + stepper)
3. cd /workspace/gravl/frontend && npm run build 2>&1 | tail -10
  </verify>
  <done>
- All listed interactive elements have explicit min-height: 44px (or height: 44px for circle buttons)
- .calendar-nav updated from 32px to 44px
- Global input font-size: 16px rule added
- Build passes
  </done>
</task>

</tasks>

<verification>
Build must pass. Visually: open Dashboard in browser, all buttons are comfortably tappable. Open WorkoutPage, warmup items and complete buttons are reachable with a thumb. No iOS zoom occurs when tapping any input.
</verification>

<success_criteria>
- Every interactive element in App.css has min-height >= 44px (or explicit height >= 44px)
- All input types have font-size: 16px preventing iOS auto-zoom
- .calendar-nav is 44x44px
- Build passes
</success_criteria>

<output>
After completion, create `.planning/phases/01-input-ux/01-03-SUMMARY.md` using the summary template.
</output>