From 6dff7aa0121be42866523cc62a1e5c62f0481c61 Mon Sep 17 00:00:00 2001 From: Lucas Berger Date: Sat, 13 Jun 2026 16:43:00 -0400 Subject: [PATCH] docs(roadmap): add Phase 17 (UI Optimization & Polish) + document phone bottom-bar overlap Long-standing PWA phone-layout defect (BottomTabBar from Phase 04, not a Phase 10 regression): the fixed bottom bar overlaps the New Event FAB and the calendar colour legend at <=767px. Added Phase 17 to the v1.1 roadmap with the defect as the seed item + fix sketch, and a pending todo (resolves_phase: 17) with full repro/file detail. --- .planning/ROADMAP.md | 29 +++++++++++++- .../2026-06-13-pwa-phone-bottombar-overlap.md | 39 +++++++++++++++++++ 2 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 .planning/todos/pending/2026-06-13-pwa-phone-bottombar-overlap.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index a3ef85e..dd906dd 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -3,7 +3,7 @@ ## Milestones - ✅ **v1.0 MVP** — Phases 1–6 (shipped 2026-06-10) — see [`milestones/v1.0-ROADMAP.md`](milestones/v1.0-ROADMAP.md) -- 🚧 **v1.1 Operability & Polish** — Phases 7–16 (planning) — mobile test harness, Gitea CI (runs the harness), faster write-back, in-app admin, per-event reminders, guided setup, real lint gate, desktop e2e, doc-only CI skip + markdown lint, CI dependency audit + security checks + image hygiene +- 🚧 **v1.1 Operability & Polish** — Phases 7–17 (planning) — mobile test harness, Gitea CI (runs the harness), faster write-back, in-app admin, per-event reminders, guided setup, real lint gate, desktop e2e, doc-only CI skip + markdown lint, CI dependency audit + security checks + image hygiene, UI optimization & polish ## Phases @@ -21,7 +21,7 @@ Full phase detail archived in [`milestones/v1.0-ROADMAP.md`](milestones/v1.0-ROA -### 🚧 v1.1 Operability & Polish (Phases 7–16) +### 🚧 v1.1 Operability & Polish (Phases 7–17) Make FamilySync configurable, administrable, and maintainable for real multi-member use — without hand-editing env files or the database. The new critical path runs **mobile test harness → Gitea CI** (CI consumes the harness specs for UI regression), and the **admin role → reminders / setup wizard** chain (a single `/api/admin` + `/api/setup` route surface carrying the v1.1 DB migration). Faster write-back is a fully independent track. @@ -35,6 +35,7 @@ Make FamilySync configurable, administrable, and maintainable for real multi-mem - [x] **Phase 14: Desktop E2E Coverage** - Add a Desktop Chrome Playwright profile + make the mobile-authored specs desktop-safe so the Phase 8 regression gate validates desktop, not just mobile (completed 2026-06-12) - [x] **Phase 15: Doc-Only CI Skip + Markdown Lint** - Aggregate-gate the slow api/harness CI jobs so doc-only PRs to main merge without running them (no branch-protection deadlock), and add markdownlint to `fast-checks` so docs get a fast format+lint gate (promoted from backlog 999.17) (completed 2026-06-12) - [x] **Phase 16: CI Dependency Audit, Security Checks & Image Hygiene** - Extend Gitea CI with outdated-dependency reporting + vulnerability audit + a baseline of additional security checks, and enforce the dev/prod image boundary so no dev-bypass, secret, or family data ships in published images (absorbs backlog 999.17); independent of the admin chain (completed 2026-06-13) +- [ ] **Phase 17: UI Optimization & Polish** - Responsive/layout polish pass for the PWA — fix the long-standing phone-layout overlap where the fixed BottomTabBar covers the New Event FAB and the calendar colour legend, and sweep other small-viewport spacing/tap-target issues surfaced in use (CSS/layout only, no behaviour change) ## Phase Details @@ -356,6 +357,29 @@ Plans: **UI hint**: no +### Phase 17: UI Optimization & Polish + +**Goal**: A responsive/layout polish pass for the PWA so the phone (≤767px) layout has no fixed-chrome overlap and small-viewport spacing reads cleanly — starting with the long-standing BottomTabBar overlap that hides the New Event FAB and the calendar colour legend. +**Mode:** standard +**Depends on**: Nothing structural (CSS/layout only). Best sequenced after Phase 10 merges (the BottomTabBar gained an Admin tab and the new SetupBanner adds top pressure on phone), but otherwise independent of the admin chain. +**Requirements**: TBD (UI/UX polish — define/promote in discuss-phase) + +**Seed defect — phone-layout bottom-bar overlap (documented 2026-06-13; long-standing, NOT introduced by Phase 10 — the BottomTabBar dates to Phase 04):** + +At ≤767px (`window.matchMedia('(max-width: 767px)')` in `apps/pwa/src/App.tsx`) the layout switches to a 48px top AppNav + a `position: fixed` BottomTabBar (`height: calc(56px + env(safe-area-inset-bottom))`, z-index 200; `apps/pwa/src/components/BottomTabBar.tsx`) + a floating "New Event" FAB (`position: fixed; bottom: var(--space-6); right: var(--space-6)`; `apps/pwa/src/components/CalendarShell.tsx`). Two problems: + + 1. **FAB sits inside the bar** — the FAB's `bottom` offset (~`--space-6`, ≈24px) is smaller than the bar's 56px height, so the round New Event button overlaps the bottom tab bar (lands on the Admin tab). + 2. **Content occluded** — the content area (`contentStyle` in `App.tsx`) reserves no `padding-bottom` for the fixed bar, so the bottom of the calendar and the colour-legend chips (e.g. the "Dev User" / member legend) slide under the bar and are partially hidden. + +**Fix sketch (CSS-only, no behaviour change):** on phone, lift the FAB to `bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-6))` and add a matching `padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px))` to the phone content/scroll area (or reduce the `100dvh` column by the bar height). Verify across the `iphone`/`pixel`/`desktop` Playwright profiles and a real narrow Chromium via playwright-cli. + +**Evidence:** reproduced 2026-06-13 with playwright-cli at 390×844 (FAB over the Admin tab; "Dev User" legend clipped) vs 1280×800 (desktop sidebar, no overlap). Full detail in todo `2026-06-13-pwa-phone-bottombar-overlap.md`. + +**Candidate scope (to sharpen in `/gsd-discuss-phase 17`):** the seed defect above, plus a sweep for other small-viewport spacing / tap-target / overlap issues (the Phase 7 `layout.spec.ts` tap-target/overflow assertions are a ready checklist) and any phone/desktop visual inconsistencies noticed in use. Keep it a focused polish pass, not a redesign. + +**Plans**: TBD +**UI hint**: yes + ## Progress | Phase | Milestone | Plans Complete | Status | Completed | @@ -376,6 +400,7 @@ Plans: | 14. Desktop E2E Coverage | v1.1 | 1/1 | Complete | 2026-06-12 | | 15. Doc-Only CI Skip + MD Lint | v1.1 | 3/3 | Complete | 2026-06-12 | | 16. CI Dep Audit, Sec & Img Hyg | v1.1 | 6/6 | Complete | 2026-06-13 | +| 17. UI Optimization & Polish | v1.1 | 0/? | Not started | - | ## Backlog diff --git a/.planning/todos/pending/2026-06-13-pwa-phone-bottombar-overlap.md b/.planning/todos/pending/2026-06-13-pwa-phone-bottombar-overlap.md new file mode 100644 index 0000000..f8e571a --- /dev/null +++ b/.planning/todos/pending/2026-06-13-pwa-phone-bottombar-overlap.md @@ -0,0 +1,39 @@ +--- +created: 2026-06-13T00:00:00.000Z +title: PWA phone layout — fixed BottomTabBar overlaps the New Event FAB + colour legend +area: pwa-ui +resolves_phase: 17 +files: + - apps/pwa/src/App.tsx + - apps/pwa/src/components/BottomTabBar.tsx + - apps/pwa/src/components/CalendarShell.tsx +--- + +## Problem + +On the phone layout (≤767px, gated by `window.matchMedia('(max-width: 767px)')` in `apps/pwa/src/App.tsx`), the fixed-position bottom chrome overlaps page content: + +1. **New Event FAB lands on the bottom bar.** The FAB is `position: fixed; bottom: var(--space-6); right: var(--space-6)` (`apps/pwa/src/components/CalendarShell.tsx`). The BottomTabBar is `position: fixed; height: calc(56px + env(safe-area-inset-bottom)); z-index: 200` (`apps/pwa/src/components/BottomTabBar.tsx`). Because the FAB's ~24px bottom offset is less than the 56px bar height, the round FAB overlaps the bottom tab bar (it sits on the Admin tab). +2. **Content slides under the bar.** The content area (`contentStyle` in `App.tsx`) has no `padding-bottom` reserving space for the fixed bar, so the bottom of the calendar and the colour-legend chips (e.g. the "Dev User" / member legend) are partially hidden behind it. + +Reported by the operator 2026-06-13 while testing the Phase 10 admin UI at a narrow window width. + +## Not a Phase 10 regression + +The BottomTabBar was introduced in **Phase 04** (`c0088ed feat(04-01): wire BrowserRouter + BottomTabBar`); the FAB lives in the pre-existing `CalendarShell`. Phase 10's `App.tsx` diff only **added the SetupBanner at the top** and passed `isAdmin` to the bar — it did not touch the FAB, the content padding, or the bar height. So this is a **long-standing** phone-layout bug, surfaced now by testing at phone width (the SetupBanner adds top pressure but is not the cause). + +## Reproduction + +- playwright-cli, Chromium, **390×844** → FAB overlaps the Admin tab; "Dev User" legend clipped under the bar. +- **1280×800** → desktop sidebar layout, no bottom bar, no overlap (correct). +- Breakpoint: phone ≤767px / desktop ≥768px. + +## Fix sketch (CSS-only, no behaviour change) + +- On phone, lift the FAB: `bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-6))`. +- Add matching bottom clearance to the phone content/scroll area: `padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px))` (or reduce the `100dvh` column height by the bar height). +- Verify across the `iphone` / `pixel` / `desktop` Playwright profiles and a real narrow Chromium via playwright-cli. + +## Disposition + +Documented and slotted into **Phase 17: UI Optimization & Polish** (see ROADMAP). Sharpen scope in `/gsd-discuss-phase 17`; this is the seed defect, with a broader small-viewport spacing/tap-target sweep as candidate scope.