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