luckberg/familysync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(roadmap): add Phase 17 (UI Optimization & Polish) + document phone bottom-bar overlap

Browse Source 
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.
This commit is contained in:
Lucas Berger
2026-06-13 16:43:00 -04:00
parent df92bd89e8
commit 6dff7aa012
2 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.planning/todos/pending/2026-06-13-pwa-phone-bottombar-overlap.md
+39
View File
@@ -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.