From 089b53d767c25c67c06eab1e9dbfac9fd187896a Mon Sep 17 00:00:00 2001
From: Lucas Berger <me@lucasberger.ca>
Date: Wed, 10 Jun 2026 16:03:32 -0400
Subject: [PATCH] fix(06): hide BottomTabBar on desktop so it no longer
 overlaps Settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add isPhone() helper using window.matchMedia('(max-width: 767px)') consistent with AppNav
- Return null when isPhone() is false (desktop ≥768px) — BottomTabBar is phone-only
- Prevents the position:fixed bottom bar from overlaying AppNav sidebar avatar/Settings on desktop
- RED test committed in prior commit (740e342)
---
 apps/pwa/src/components/BottomTabBar.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/pwa/src/components/BottomTabBar.tsx b/apps/pwa/src/components/BottomTabBar.tsx
index 92b8d40..14f8221 100644
--- a/apps/pwa/src/components/BottomTabBar.tsx
+++ b/apps/pwa/src/components/BottomTabBar.tsx
@@ -12,12 +12,18 @@
  *   - z-index: 200 (below dialogs at 300)
  *
  * Uses react-router NavLink for real-URL active detection (D-17).
- * Only rendered on phone — DesktopNav handles desktop navigation.
+ * Only rendered on phone (≤767px) — DesktopNav handles desktop navigation.
+ * Returns null on desktop so it does not overlay the AppNav sidebar avatar/Settings
+ * button (FIX 4). Same breakpoint (767px) as AppNav's phone/desktop switch.
  */
 
 import { NavLink } from 'react-router'
 import { CalendarDays, List } from 'lucide-react'
 
+function isPhone(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches
+}
+
 const tabBase: React.CSSProperties = {
   flex: 1,
   display: 'flex',
@@ -44,6 +50,13 @@ const tabActiveOverride: React.CSSProperties = {
 }
 
 export function BottomTabBar() {
+  // Phone-only: return null on desktop (≥768px) so the fixed bar does not overlay
+  // the AppNav sidebar's Settings/avatar button (FIX 4). Consistent with the
+  // isPhone() breakpoint used in AppNav and CalendarShell.
+  if (!isPhone()) {
+    return null
+  }
+
   return (
     <nav
       aria-label="Main navigation"