Lucas Berger
6dff7aa012
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.
40 lines
2.7 KiB
Markdown
40 lines
2.7 KiB
Markdown
---
|
||
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.
|