From 09227ec0d1e7bbc8cfedf423926e96f2b3e85bea Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Wed, 14 Oct 2026 09:22:38 +0200
Subject: [PATCH] fix(tours): the map search sits between the panels without a
 physical side, and the day row facts use the caption tier

---
 .../src/components/Tours/TourDayRowFacts.tsx  |  4 +--
 client/src/pages/TripPlannerPage.tsx          | 36 +++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Tours/TourDayRowFacts.tsx b/client/src/components/Tours/TourDayRowFacts.tsx
index 4c6d32245..a42b28391 100644
--- a/client/src/components/Tours/TourDayRowFacts.tsx
+++ b/client/src/components/Tours/TourDayRowFacts.tsx
@@ -55,7 +55,7 @@ function Fact({
             event.stopPropagation();
             if (event.key === 'Escape') setOpen(false);
           }}
-          className={`inline-flex items-center gap-1 whitespace-nowrap rounded-[6px] px-1.5 py-0.5 text-[0.65625rem] tabular-nums focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent ${mobile ? 'bg-[color:var(--m-ic)] text-m-muted' : 'bg-surface-card text-content-secondary'}`}
+          className={`inline-flex items-center gap-1 whitespace-nowrap rounded-[6px] px-1.5 py-0.5 text-caption tabular-nums focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent ${mobile ? 'bg-[color:var(--m-ic)] text-m-muted' : 'bg-surface-card text-content-secondary'}`}
         >
           <Icon size={11} aria-hidden="true" />
           {value}
@@ -65,7 +65,7 @@ function Fact({
         id={id}
         hidden={!open}
         role="note"
-        className={`absolute start-0 top-full z-30 mt-1 w-40 whitespace-normal rounded-[6px] border p-2 text-[0.6875rem] shadow-sm ${mobile ? 'bg-[color:var(--m-ic)] text-m-ink' : 'border-edge bg-surface-card text-content'}`}
+        className={`absolute start-0 top-full z-30 mt-1 w-40 whitespace-normal rounded-[6px] border p-2 text-caption shadow-sm ${mobile ? 'bg-[color:var(--m-ic)] text-m-ink' : 'border-edge bg-surface-card text-content'}`}
       >
         {label}
       </span>
diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx
index 5d697f260..f555373bb 100644
--- a/client/src/pages/TripPlannerPage.tsx
+++ b/client/src/pages/TripPlannerPage.tsx
@@ -663,24 +663,24 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
               viewBaseLayer={tourPlanner.mapBaseLayer}
               onViewBaseLayerChange={tourPlanner.setMapBaseLayer}
             />
-            <div
-              style={{
-                position: 'absolute',
-                top: 12,
-                left: `calc(50% + ${((leftHidden ? 56 : leftPanelPx) - (rightHidden ? 56 : rightPanelPx)) / 2}px)`,
-                transform: 'translateX(-50%)',
-                width: `min(360px, calc(100vw - ${(leftHidden ? 56 : leftPanelPx) + (rightHidden ? 56 : rightPanelPx) + 32}px))`,
-                zIndex: 19,
-              }}
-            >
-              <LocationSelect
-                value={locationSearch.value}
-                onChange={locationSearch.onChange}
-                placeholder={t('reservations.searchLocation')}
-                ariaLabel={t('reservations.searchLocation')}
-                showSearchStatus
-                style={{ width: '100%' }}
-              />
+            {/* Centred over the map between the two panels, which sit on fixed physical sides. */}
+            <div style={{ position: 'absolute', top: 12, insetInline: 0, display: 'flex', justifyContent: 'center', pointerEvents: 'none', zIndex: 19 }}>
+              <div
+                style={{
+                  transform: `translateX(${((leftHidden ? 56 : leftPanelPx) - (rightHidden ? 56 : rightPanelPx)) / 2}px)`,
+                  width: `min(360px, calc(100vw - ${(leftHidden ? 56 : leftPanelPx) + (rightHidden ? 56 : rightPanelPx) + 32}px))`,
+                  pointerEvents: 'auto',
+                }}
+              >
+                <LocationSelect
+                  value={locationSearch.value}
+                  onChange={locationSearch.onChange}
+                  placeholder={t('reservations.searchLocation')}
+                  ariaLabel={t('reservations.searchLocation')}
+                  showSearchStatus
+                  style={{ width: '100%' }}
+                />
+              </div>
             </div>
             <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
               <PanelTab hidden={leftHidden} label={leftHidden ? t('trip.mobilePlan') : t('common.collapse')} onToggle={toggleLeft} />