gravl/.planning/phases/01-input-ux/01-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
01-input-ux	03	execute	1		frontend/src/App.css	true	truths artifacts key_links 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 path provides contains frontend/src/App.css Touch target audit fixes — explicit min-height on all interactive elements min-height: 44px

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.

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

@.planning/PROJECT.md @.planning/ROADMAP.md @frontend/src/App.css @frontend/src/index.css Task 1: Audit touch targets and fix all violations in App.css frontend/src/App.css 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:

   min-height: 44px;
   

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

   min-height: 44px;
   

3. .warmup-done-btn — currently padding: 1rem. Add:

   min-height: 44px;
   

4. .finish-workout-btn — currently padding: 1.25rem. Add:

   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:

   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:

    /* 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.

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

• 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

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.

<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>

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