From 5e1c714894d2177da545055c3fe42dcfd0919068 Mon Sep 17 00:00:00 2001
From: Lucas Berger <me@lucasberger.ca>
Date: Thu, 18 Jun 2026 12:48:35 -0400
Subject: [PATCH] fix(17-03): lift FAB above BottomTabBar and reserve phone
 content padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CalendarShell.tsx: FAB bottom changed from var(--space-6) to
  calc(var(--bottom-chrome-h) + var(--space-6)) — sits 24px above bar
- App.tsx: contentStyle gains phone-only paddingBottom: var(--bottom-chrome-h)
  via spread pattern ...(phone ? {...} : {}) — desktop unchanged
---
 apps/pwa/src/App.tsx                      | 2 ++
 apps/pwa/src/components/CalendarShell.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/pwa/src/App.tsx b/apps/pwa/src/App.tsx
index 84feadf..c11e6ea 100644
--- a/apps/pwa/src/App.tsx
+++ b/apps/pwa/src/App.tsx
@@ -160,6 +160,8 @@ export default function App() {
     flexDirection: 'column',
     overflow: 'hidden',
     position: 'relative',
+    // Phone-only: reserve space for the fixed BottomTabBar so content is not occluded
+    ...(phone ? { paddingBottom: 'var(--bottom-chrome-h)' } : {}),
   };
 
   // Setup gate: while setup status is loading, render nothing (prevent flash).
diff --git a/apps/pwa/src/components/CalendarShell.tsx b/apps/pwa/src/components/CalendarShell.tsx
index 6b28373..cc7f0de 100644
--- a/apps/pwa/src/components/CalendarShell.tsx
+++ b/apps/pwa/src/components/CalendarShell.tsx
@@ -467,7 +467,7 @@ export function CalendarShell() {
           onClick={() => setEventForm(true, 'create')}
           style={{
             position: 'fixed',
-            bottom: 'var(--space-6)',
+            bottom: 'calc(var(--bottom-chrome-h) + var(--space-6))',
             right: 'var(--space-6)',
             width: '56px',
             height: '56px',