145 lines
5.2 KiB
Markdown
145 lines
5.2 KiB
Markdown
---
|
|
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>
|