From 79c460fd3863175a0b40c4b6017d3e7fdaf6672e Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Fri, 14 Aug 2026 09:41:14 +0200
Subject: [PATCH] fix(map): keep the layer switcher clear of the sidebar edge

At a 12px gap the pill's own shadow ran into the sidebar it sits beside, so the
two read as one surface rather than a control floating on the map. 20px.
---
 client/src/components/Map/MapView.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Map/MapView.tsx b/client/src/components/Map/MapView.tsx
index 2a5fcddf3..eca314267 100644
--- a/client/src/components/Map/MapView.tsx
+++ b/client/src/components/Map/MapView.tsx
@@ -899,7 +899,10 @@ export const MapView = memo(function MapView({
       onClick={cycleTrackingMode}
       bottomOffset={locationButtonBottom as unknown as number}
     />}
-    <div style={{ position: 'absolute', left: leftWidth + 12, bottom: switcherBottom, zIndex: 1000, pointerEvents: 'none' }}>
+    {/* 20px off the sidebar, not 12: the pill is round and frosted, so at the
+        smaller gap its shadow ran into the sidebar edge and the two read as one
+        surface. */}
+    <div style={{ position: 'absolute', left: leftWidth + 20, bottom: switcherBottom, zIndex: 1000, pointerEvents: 'none' }}>
       <MapLayerSwitcher active={baseLayer} onToggle={toggleBaseLayer} />
     </div>
     </div>