docs(01-input-ux): create phase plan

2026-02-16 06:38:05 +01:00
parent 055dc93c89
commit f23a4902e6
4 changed files with 598 additions and 4 deletions
@@ -0,0 +1,144 @@
+---
+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>