From f55f5ea449cca6d154dcd9d78bbe4a978ef19425 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 21 Mar 2026 22:42:21 +0100
Subject: [PATCH] Fix PWA safe area: navbar extends behind status bar, remove
 bottom black bar

---
 client/src/components/Layout/Navbar.jsx |  4 +++-
 client/src/index.css                    | 14 +++-----------
 client/src/pages/AdminPage.jsx          |  2 +-
 client/src/pages/AtlasPage.jsx          |  4 ++--
 client/src/pages/DashboardPage.jsx      |  2 +-
 client/src/pages/FilesPage.jsx          |  2 +-
 client/src/pages/PhotosPage.jsx         |  2 +-
 client/src/pages/SettingsPage.jsx       |  2 +-
 client/src/pages/TripPlannerPage.jsx    |  8 ++++----
 client/src/pages/VacayPage.jsx          |  4 ++--
 10 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Layout/Navbar.jsx b/client/src/components/Layout/Navbar.jsx
index 7c990db..4a2bc0c 100644
--- a/client/src/components/Layout/Navbar.jsx
+++ b/client/src/components/Layout/Navbar.jsx
@@ -56,7 +56,9 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare })
       borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)'}`,
       boxShadow: dark ? '0 1px 12px rgba(0,0,0,0.2)' : '0 1px 12px rgba(0,0,0,0.05)',
       touchAction: 'manipulation',
-    }} className="h-14 flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
+      paddingTop: 'env(safe-area-inset-top, 0px)',
+      height: 'var(--nav-h)',
+    }} className="flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
       {/* Left side */}
       <div className="flex items-center gap-3 min-w-0">
         {showBack && (
diff --git a/client/src/index.css b/client/src/index.css
index 44ad2fd..112e03f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -3,17 +3,7 @@
 @tailwind utilities;
 
 html { height: 100%; overflow: hidden; }
-body {
-  height: 100%;
-  overflow: auto;
-  overscroll-behavior: none;
-  -webkit-overflow-scrolling: touch;
-  /* PWA safe areas (notch, home indicator) */
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
-}
+body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
 
 .atlas-tooltip {
   background: rgba(10, 10, 20, 0.6) !important;
@@ -148,6 +138,8 @@ html.dark .bg-slate-50\/60, html.dark [class*="bg-slate-50/"] { background-color
 
 /* ── Design tokens ─────────────────────────────── */
 :root {
+  --safe-top: env(safe-area-inset-top, 0px);
+  --nav-h: calc(56px + var(--safe-top));
   --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
   --sp-1: 4px;
   --sp-2: 8px;
diff --git a/client/src/pages/AdminPage.jsx b/client/src/pages/AdminPage.jsx
index 903a4f7..d2c1f44 100644
--- a/client/src/pages/AdminPage.jsx
+++ b/client/src/pages/AdminPage.jsx
@@ -209,7 +209,7 @@ export default function AdminPage() {
     <div className="min-h-screen" style={{ background: 'var(--bg-secondary)' }}>
       <Navbar />
 
-      <div className="pt-14">
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
         <div className="max-w-6xl mx-auto px-4 py-8">
           {/* Header */}
           <div className="flex items-center gap-3 mb-6">
diff --git a/client/src/pages/AtlasPage.jsx b/client/src/pages/AtlasPage.jsx
index a8e7fce..49bea8e 100644
--- a/client/src/pages/AtlasPage.jsx
+++ b/client/src/pages/AtlasPage.jsx
@@ -270,7 +270,7 @@ export default function AtlasPage() {
     return (
       <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
         <Navbar />
-        <div className="pt-14 flex items-center justify-center" style={{ minHeight: 'calc(100vh - 56px)' }}>
+        <div className="flex items-center justify-center" style={{ paddingTop: 'var(--nav-h)', minHeight: 'calc(100vh - var(--nav-h))' }}>
           <div className="w-8 h-8 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
         </div>
       </div>
@@ -280,7 +280,7 @@ export default function AtlasPage() {
   return (
     <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
       <Navbar />
-      <div style={{ position: 'fixed', top: 56, left: 0, right: 0, bottom: 0 }}>
+      <div style={{ position: 'fixed', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0 }}>
         {/* Map */}
         <div ref={mapRef} style={{ position: 'absolute', inset: 0, zIndex: 1, background: dark ? '#1a1a2e' : '#f0f0f0' }} />
 
diff --git a/client/src/pages/DashboardPage.jsx b/client/src/pages/DashboardPage.jsx
index ace9ff1..6c613cd 100644
--- a/client/src/pages/DashboardPage.jsx
+++ b/client/src/pages/DashboardPage.jsx
@@ -456,7 +456,7 @@ export default function DashboardPage() {
     <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--bg-secondary)', ...font }}>
       <Navbar />
       {demoMode && <DemoBanner />}
-      <div style={{ flex: 1, overflow: 'auto', overscrollBehavior: 'contain', marginTop: 56 }}>
+      <div style={{ flex: 1, overflow: 'auto', overscrollBehavior: 'contain', marginTop: 'var(--nav-h)' }}>
         <div style={{ maxWidth: 1300, margin: '0 auto', padding: '32px 20px 60px' }}>
 
           {/* Header */}
diff --git a/client/src/pages/FilesPage.jsx b/client/src/pages/FilesPage.jsx
index 0653900..4fb41ca 100644
--- a/client/src/pages/FilesPage.jsx
+++ b/client/src/pages/FilesPage.jsx
@@ -61,7 +61,7 @@ export default function FilesPage() {
     <div className="min-h-screen bg-slate-50">
       <Navbar tripTitle={trip?.title} tripId={tripId} showBack onBack={() => navigate(`/trips/${tripId}`)} />
 
-      <div className="pt-14">
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
         <div className="max-w-5xl mx-auto px-4 py-6">
           <div className="flex items-center gap-3 mb-6">
             <Link
diff --git a/client/src/pages/PhotosPage.jsx b/client/src/pages/PhotosPage.jsx
index b617502..2e7e538 100644
--- a/client/src/pages/PhotosPage.jsx
+++ b/client/src/pages/PhotosPage.jsx
@@ -71,7 +71,7 @@ export default function PhotosPage() {
     <div className="min-h-screen bg-slate-50">
       <Navbar tripTitle={trip?.title} tripId={tripId} showBack onBack={() => navigate(`/trips/${tripId}`)} />
 
-      <div className="pt-14">
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
         <div className="max-w-7xl mx-auto px-4 py-6">
           {/* Header */}
           <div className="flex items-center gap-3 mb-6">
diff --git a/client/src/pages/SettingsPage.jsx b/client/src/pages/SettingsPage.jsx
index df2c828..994793c 100644
--- a/client/src/pages/SettingsPage.jsx
+++ b/client/src/pages/SettingsPage.jsx
@@ -136,7 +136,7 @@ export default function SettingsPage() {
     <div className="min-h-screen" style={{ background: 'var(--bg-secondary)' }}>
       <Navbar />
 
-      <div className="pt-14">
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
         <div className="max-w-2xl mx-auto px-4 py-8 space-y-6">
           <div>
             <h1 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('settings.title')}</h1>
diff --git a/client/src/pages/TripPlannerPage.jsx b/client/src/pages/TripPlannerPage.jsx
index 1c85be3..5ec42de 100644
--- a/client/src/pages/TripPlannerPage.jsx
+++ b/client/src/pages/TripPlannerPage.jsx
@@ -281,7 +281,7 @@ export default function TripPlannerPage() {
       <Navbar tripTitle={trip.title} tripId={tripId} showBack onBack={() => navigate('/dashboard')} onShare={() => setShowMembersModal(true)} />
 
       <div style={{
-        position: 'fixed', top: 56, left: 0, right: 0, zIndex: 40,
+        position: 'fixed', top: 'var(--nav-h)', left: 0, right: 0, zIndex: 40,
         display: 'flex', alignItems: 'center', justifyContent: 'center',
         padding: '0 12px',
         background: 'var(--bg-elevated)',
@@ -351,7 +351,7 @@ export default function TripPlannerPage() {
             <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
               <button onClick={() => setLeftCollapsed(c => !c)}
                 style={{
-                  position: leftCollapsed ? 'fixed' : 'absolute', top: leftCollapsed ? 'calc(56px + 44px + 14px)' : 14, left: leftCollapsed ? 10 : undefined, right: leftCollapsed ? undefined : -28, zIndex: 25,
+                  position: leftCollapsed ? 'fixed' : 'absolute', top: leftCollapsed ? 'calc(var(--nav-h) + 44px + 14px)' : 14, left: leftCollapsed ? 10 : undefined, right: leftCollapsed ? undefined : -28, zIndex: 25,
                   width: 36, height: 36, borderRadius: leftCollapsed ? 10 : '0 10px 10px 0',
                   background: leftCollapsed ? '#000' : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
                   boxShadow: leftCollapsed ? '0 2px 12px rgba(0,0,0,0.2)' : 'none', border: 'none',
@@ -406,7 +406,7 @@ export default function TripPlannerPage() {
             <div className="hidden md:block" style={{ position: 'absolute', right: 10, top: 10, bottom: 10, zIndex: 20 }}>
               <button onClick={() => setRightCollapsed(c => !c)}
                 style={{
-                  position: rightCollapsed ? 'fixed' : 'absolute', top: rightCollapsed ? 'calc(56px + 44px + 14px)' : 14, right: rightCollapsed ? 10 : undefined, left: rightCollapsed ? undefined : -28, zIndex: 25,
+                  position: rightCollapsed ? 'fixed' : 'absolute', top: rightCollapsed ? 'calc(var(--nav-h) + 44px + 14px)' : 14, right: rightCollapsed ? 10 : undefined, left: rightCollapsed ? undefined : -28, zIndex: 25,
                   width: 36, height: 36, borderRadius: rightCollapsed ? 10 : '10px 0 0 10px',
                   background: rightCollapsed ? '#000' : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
                   boxShadow: rightCollapsed ? '0 2px 12px rgba(0,0,0,0.2)' : 'none', border: 'none',
@@ -486,7 +486,7 @@ export default function TripPlannerPage() {
 
             {mobileSidebarOpen && ReactDOM.createPortal(
               <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 9999 }} onClick={() => setMobileSidebarOpen(null)}>
-                <div style={{ position: 'absolute', top: 56, left: 0, right: 0, bottom: 0, background: 'var(--bg-card)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }} onClick={e => e.stopPropagation()}>
+                <div style={{ position: 'absolute', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0, background: 'var(--bg-card)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }} onClick={e => e.stopPropagation()}>
                   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderBottom: '1px solid var(--border-secondary)' }}>
                     <span style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{mobileSidebarOpen === 'left' ? t('trip.mobilePlan') : t('trip.mobilePlaces')}</span>
                     <button onClick={() => setMobileSidebarOpen(null)} style={{ background: 'var(--bg-tertiary)', border: 'none', borderRadius: '50%', width: 28, height: 28, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-primary)' }}>
diff --git a/client/src/pages/VacayPage.jsx b/client/src/pages/VacayPage.jsx
index 9d59ebe..4f37573 100644
--- a/client/src/pages/VacayPage.jsx
+++ b/client/src/pages/VacayPage.jsx
@@ -50,7 +50,7 @@ export default function VacayPage() {
     return (
       <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
         <Navbar />
-        <div className="pt-14 flex items-center justify-center" style={{ minHeight: 'calc(100vh - 56px)' }}>
+        <div className="flex items-center justify-center" style={{ paddingTop: 'var(--nav-h)', minHeight: 'calc(100vh - var(--nav-h))' }}>
           <div className="w-8 h-8 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
         </div>
       </div>
@@ -119,7 +119,7 @@ export default function VacayPage() {
     <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
       <Navbar />
 
-      <div className="pt-14">
+      <div style={{ paddingTop: 'var(--nav-h)' }}>
         <div className="max-w-[1800px] mx-auto px-3 sm:px-4 py-4 sm:py-6">
           {/* Header */}
           <div className="flex items-center justify-between mb-4 sm:mb-5">