docs(11-01): complete mobile responsiveness and MD3 focus indicators plan

- 11-01-SUMMARY.md: execution summary for POLISH-01/POLISH-02 - STATE.md: position advanced to phase 11 plan 01 complete, decisions added - ROADMAP.md: phase 11 progress updated (1/2 plans complete) - REQUIREMENTS.md: POLISH-01 and POLISH-02 marked complete
2026-04-01 13:26:58 +02:00
parent 9015db565e
commit 3af06493ea
4 changed files with 143 additions and 20 deletions
@@ -0,0 +1,120 @@
+---
+phase: 11-polish-responsiveness
+plan: 01
+subsystem: ui
+tags: [tailwind, responsive, mobile, accessibility, focus-visible, md3]
+
+# Dependency graph
+requires:
+  - phase: 09-md3-components
+    provides: MD3_BTN_FILLED/OUTLINED/TEXT constants, BackendCard, StepIndicator, ThemeToggle, FieldRenderer components
+  - phase: 10-content-clarity
+    provides: final step component shapes and layouts
+provides:
+  - Mobile-responsive wizard layout (cards stack, buttons stack, step labels collapse)
+  - MD3 focus-visible ring-3 indicators on all interactive elements
+affects: [future UI phases, any plan touching step components or button constants]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "Mobile-first responsive: flex-col sm:flex-row for button rows, grid grid-cols-1 sm:grid-cols-2 for card grids"
+    - "hidden sm:block for collapsible labels on compact viewports"
+    - "focus-visible:ring-3 focus-visible:ring-primary on standalone interactive elements"
+    - "focus-visible:ring-inset on overflow-hidden button groups (ThemeToggle) to avoid clipping"
+
+key-files:
+  created: []
+  modified:
+    - src/styles/md3-buttons.ts
+    - src/components/ui/BackendCard.tsx
+    - src/components/ui/ThemeToggle.tsx
+    - src/components/ui/FieldRenderer.tsx
+    - src/components/wizard/BackendSelectionStep.tsx
+    - src/components/wizard/RemoteConfigStep.tsx
+    - src/components/wizard/DeploymentStep.tsx
+    - src/components/wizard/ReviewStep.tsx
+    - src/components/wizard/StepIndicator.tsx
+
+key-decisions:
+  - "ring-inset on ThemeToggle focus ring because overflow-hidden on container clips outset rings"
+  - "No ring-offset-2 on BackendCard to avoid dark mode surface color issues"
+  - "Tooltip buttons use ring-2 (not ring-3) — small utility buttons suit smaller ring"
+  - "FieldRenderer select uses focus-visible:ring-2 (not focus:ring-2) for keyboard-only focus behavior on selects"
+
+patterns-established:
+  - "Button row responsive pattern: flex flex-col sm:flex-row gap-3 mt-6 with w-full sm:w-auto on each button"
+  - "Card grid responsive pattern: grid grid-cols-1 sm:grid-cols-2 gap-3 on container div"
+  - "Step label collapse: hidden sm:block on all label spans inside StepIndicator"
+
+requirements-completed: [POLISH-01, POLISH-02]
+
+# Metrics
+duration: 3min
+completed: 2026-04-01
+---
+
+# Phase 11 Plan 01: Mobile Responsiveness & MD3 Focus Indicators Summary
+
+**Tailwind v4 mobile-first responsive layout (card grids, stacked button rows, collapsed step labels) plus MD3 focus-visible ring-3 keyboard indicators across all wizard interactive elements**
+
+## Performance
+
+- **Duration:** 3 min
+- **Started:** 2026-04-01T11:22:10Z
+- **Completed:** 2026-04-01T11:25:12Z
+- **Tasks:** 2
+- **Files modified:** 9
+
+## Accomplishments
+- Backend cards container uses responsive grid (1-col on mobile, 2-col on desktop); BackendCard fills its cell with w-full
+- All four step button rows stack vertically on mobile (flex-col) and go horizontal on desktop (sm:flex-row) with full-width buttons on mobile
+- StepIndicator hides label text on mobile (hidden sm:block) keeping circles and connectors visible
+- MD3 button constants upgraded from ring-2/50 to ring-3 for all three variants (FILLED, OUTLINED, TEXT)
+- BackendCard, ThemeToggle, StepIndicator completed-step circle, and FieldRenderer tooltip buttons all have focus-visible rings
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Mobile responsive layout** - `07f97d9` (feat)
+2. **Task 2: MD3 focus-visible indicators** - `9015db5` (feat)
+
+**Plan metadata:** (docs commit — see below)
+
+## Files Created/Modified
+- `src/styles/md3-buttons.ts` - Upgraded ring-2/primary/50 to ring-3/primary on all three constants
+- `src/components/ui/BackendCard.tsx` - Added w-full and focus-visible:ring-3 to button base classes
+- `src/components/ui/ThemeToggle.tsx` - Added focus-visible:ring-3 ring-inset to both selected/unselected branches
+- `src/components/ui/FieldRenderer.tsx` - Select uses focus-visible:ring-2; both tooltip buttons get focus-visible:ring-2 rounded
+- `src/components/wizard/BackendSelectionStep.tsx` - Responsive card grid and button row
+- `src/components/wizard/RemoteConfigStep.tsx` - Responsive button row with w-full sm:w-auto
+- `src/components/wizard/DeploymentStep.tsx` - Responsive button row with w-full sm:w-auto
+- `src/components/wizard/ReviewStep.tsx` - Responsive button row with w-full sm:w-auto
+- `src/components/wizard/StepIndicator.tsx` - hidden sm:block on all three label spans; ring-3 on completed-step circle
+
+## Decisions Made
+- ring-inset used on ThemeToggle because the container has overflow-hidden — outset ring would be clipped by the parent border
+- No ring-offset-2 on BackendCard to avoid dark mode surface color mismatch (per research open question #2)
+- Tooltip buttons use ring-2 (not ring-3) — they are small utility icons where a smaller ring is more appropriate
+- FieldRenderer select changed from focus:ring-2 to focus-visible:ring-2 so selects behave like buttons (ring on keyboard only), not like text inputs
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+None.
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- POLISH-01 and POLISH-02 requirements satisfied
+- All 202 existing tests pass — no regressions introduced
+- Wizard is now mobile-usable and fully keyboard-navigable
+
+---
+*Phase: 11-polish-responsiveness*
+*Completed: 2026-04-01*