From 89c96ed5542c0e64ccf68b2036001002a47e5677 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 18 Oct 2026 18:04:34 +0200
Subject: [PATCH] fix(trips): the embedded journal's offsets as classes on its
 wrapper, not in index.css

index.css is held at its line baseline. The two variables the embedded journal overrides (--nav-h on the desktop, --m-safe-top on the phone) now sit as arbitrary properties on the wrapper that needs them.
---
 client/src/index.css                                  |  8 --------
 client/src/mobile/mobile.css                          |  4 ----
 client/src/mobile/screens/trip/tabs/MTripTabPanel.tsx |  4 ++--
 client/src/pages/tripPlanner/TripJournalPanel.tsx     | 10 +++++++---
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 64c0dd69a..2bf9bee9b 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -824,14 +824,6 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
   :root { --nav-h: calc(64px + env(safe-area-inset-top, 0px)); }
 }
 
-/* A journal shown inside a trip (its Journal tab): the journal's own fixed bars
-   measure themselves from --nav-h, so below the trip's navbar they also have to
-   clear the trip's tab bar. */
-.trip-embedded-journal { --nav-h: 44px; }
-@media (min-width: 768px) {
-  .trip-embedded-journal { --nav-h: calc(64px + env(safe-area-inset-top, 0px) + 44px); }
-}
-
 .dark {
   --bg-primary: #121215;
   --bg-secondary: #1a1a1e;
diff --git a/client/src/mobile/mobile.css b/client/src/mobile/mobile.css
index f03519d12..cf38e9f96 100644
--- a/client/src/mobile/mobile.css
+++ b/client/src/mobile/mobile.css
@@ -132,10 +132,6 @@
   to { opacity: 0; transform: translateY(6px); }
 }
 
-/* A journal inside a trip's Journal tab starts below the trip's own floating
-   top controls rather than under them. */
-.m-embedded-journal { --m-safe-top: calc(env(safe-area-inset-top, 0px) + 62px); }
-
 .m-sheet-in { animation: m-sheet-in 280ms var(--ease-drawer) both; }
 .m-sheet-out { animation: m-sheet-out 280ms var(--ease-drawer) both; }
 .m-drawer-in { animation: m-drawer-in 280ms var(--ease-drawer) both; }
diff --git a/client/src/mobile/screens/trip/tabs/MTripTabPanel.tsx b/client/src/mobile/screens/trip/tabs/MTripTabPanel.tsx
index 6e236e680..e557b00c1 100644
--- a/client/src/mobile/screens/trip/tabs/MTripTabPanel.tsx
+++ b/client/src/mobile/screens/trip/tabs/MTripTabPanel.tsx
@@ -63,10 +63,10 @@ export default function MTripTabPanel({ planner, shell, tab }: MTripTabPanelProp
     case 'roadtrip':
       return <MRoadtripTab planner={planner} shell={shell} tab={tab} />
     // The journal the trip links: the Journey addon's own phone screen, moved
-    // below the trip's floating top controls (see .m-embedded-journal).
+    // below the trip's floating top controls: its bars measure from --m-safe-top.
     case 'journal':
       return planner.journalId == null ? null : (
-        <div className="m-embedded-journal absolute inset-0 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden [--m-safe-top:calc(env(safe-area-inset-top,0px)+62px)]">
           <MJourneyDetail journeyId={planner.journalId} embedded />
         </div>
       )
diff --git a/client/src/pages/tripPlanner/TripJournalPanel.tsx b/client/src/pages/tripPlanner/TripJournalPanel.tsx
index 358ebce36..a8120a9ed 100644
--- a/client/src/pages/tripPlanner/TripJournalPanel.tsx
+++ b/client/src/pages/tripPlanner/TripJournalPanel.tsx
@@ -3,13 +3,17 @@ import { JourneyDetailPageDesktop } from '../JourneyDetailPage';
 /**
  * The trip's Journal tab on the desktop: the Journey addon's own journal view,
  * not a copy of it, so the journal looks and works the same in both places and
- * stays live through the journey's own sync. The wrapper moves the view's fixed
- * bars below the trip's tab bar (see .trip-embedded-journal).
+ * stays live through the journey's own sync.
+ *
+ * The view's fixed bars measure themselves from --nav-h, so the wrapper sets it
+ * to the navbar plus the trip's 44 px tab bar, and they sit below both.
  */
+const BELOW_TRIP_TABS = '[--nav-h:44px] md:[--nav-h:calc(64px+env(safe-area-inset-top,0px)+44px)]';
+
 export default function TripJournalPanel({ journeyId }: { journeyId: number | null }) {
   if (journeyId == null) return null;
   return (
-    <div className="trip-embedded-journal absolute inset-0 overflow-y-auto">
+    <div className={`${BELOW_TRIP_TABS} absolute inset-0 overflow-y-auto`}>
       <JourneyDetailPageDesktop journeyId={journeyId} embedded />
     </div>
   );