From fb2e8d8209fac129b4fb44f58a99faf2dc407e4b Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Wed, 1 Apr 2026 00:11:06 +0200
Subject: [PATCH] fix: keep marker tooltip visible on touch devices when
 selected

On mobile/touch devices, Leaflet tooltips disappear immediately on tap
since there is no hover state. This makes the info bubble permanent for
the selected marker on touch devices so it stays readable.

Fixes #249
---
 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 5d6b7e7..2a89f6a 100644
--- a/client/src/components/Map/MapView.tsx
+++ b/client/src/components/Map/MapView.tsx
@@ -422,6 +422,8 @@ export const MapView = memo(function MapView({
     })
   }, [])
 
+  const isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
+
   const markers = useMemo(() => places.map((place) => {
     const isSelected = place.id === selectedPlaceId
     const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
@@ -444,6 +446,7 @@ export const MapView = memo(function MapView({
           offset={[0, 0]}
           opacity={1}
           className="map-tooltip"
+          permanent={isTouchDevice && isSelected}
         >
           <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
             <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
@@ -467,7 +470,7 @@ export const MapView = memo(function MapView({
         </Tooltip>
       </Marker>
     )
-  }), [places, selectedPlaceId, dayOrderMap, photoUrls, onMarkerClick])
+  }), [places, selectedPlaceId, dayOrderMap, photoUrls, onMarkerClick, isTouchDevice])
 
   return (
     <MapContainer