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"