From 502c334cbf6f26147b09ed1b7f94e893f2d213a2 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 21 Mar 2026 22:54:20 +0100
Subject: [PATCH] Fix bottom safe area: html background + fixed inset for map
 page

---
 client/src/index.css                 | 2 +-
 client/src/pages/TripPlannerPage.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 112e03f..3cb9785 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-html { height: 100%; overflow: hidden; }
+html { height: 100%; overflow: hidden; background-color: var(--bg-primary); }
 body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
 
 .atlas-tooltip {
diff --git a/client/src/pages/TripPlannerPage.jsx b/client/src/pages/TripPlannerPage.jsx
index 4430310..4fdbd75 100644
--- a/client/src/pages/TripPlannerPage.jsx
+++ b/client/src/pages/TripPlannerPage.jsx
@@ -277,7 +277,7 @@ export default function TripPlannerPage() {
   if (!trip) return null
 
   return (
-    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', ...fontStyle }}>
+    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', ...fontStyle }}>
       <Navbar tripTitle={trip.title} tripId={tripId} showBack onBack={() => navigate('/dashboard')} onShare={() => setShowMembersModal(true)} />
 
       <div style={{