familysync/.planning/todos/pending/2026-06-13-pwa-phone-bottombar-overlap.md at 100b89054ecba4a74b4fe93f9af5414130997d46

Files

T

Lucas Berger 6dff7aa012 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.

2026-06-13 16:43:00 -04:00

2.7 KiB

Raw Blame History

created, title, area, resolves_phase, files

created

title

area

resolves_phase

files

2026-06-13T00:00:00.000Z

PWA phone layout — fixed BottomTabBar overlaps the New Event FAB + colour legend

pwa-ui

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:

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).
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.

2.7 KiB Raw Blame History Unescape Escape