From f46f6f38fc4e9d86c4b5d27673bdbd373eea81d4 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Fri, 6 Nov 2026 20:45:15 +0100
Subject: [PATCH] fix(journey): no zoom buttons on the journey map on touch
 screens

On a phone they sat under the bottom bar, and a finger zooms with a pinch
anyway; devices with a mouse or trackpad keep them.
---
 client/src/components/Journey/JourneyMap.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Journey/JourneyMap.tsx b/client/src/components/Journey/JourneyMap.tsx
index d0d9f238d..06f088531 100644
--- a/client/src/components/Journey/JourneyMap.tsx
+++ b/client/src/components/Journey/JourneyMap.tsx
@@ -691,7 +691,11 @@ function JourneyMap(
         ref={containerRef}
         style={{ width: '100%', height: '100%' }}
       />
-      <div style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 400, display: 'flex', flexDirection: 'column', gap: 4 }}>
+      {/* A finger zooms with a pinch, and on a phone these sat under the bottom bar (#3001). */}
+      <div
+        className="[@media(pointer:coarse)]:hidden"
+        style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 400, display: 'flex', flexDirection: 'column', gap: 4 }}
+      >
         <button type="button" onClick={() => zoom(true)} style={zoomButtonStyle(dark)}>+</button>
         <button type="button" onClick={() => zoom(false)} style={zoomButtonStyle(dark)}>−</button>
       </div>