diff --git a/client/src/components/Map/MapViewGL.tsx b/client/src/components/Map/MapViewGL.tsx index c5c2bd42d..bb1819996 100644 --- a/client/src/components/Map/MapViewGL.tsx +++ b/client/src/components/Map/MapViewGL.tsx @@ -485,7 +485,9 @@ export function MapViewGL({ popupRef.current = new gl.Popup({ closeButton: false, closeOnClick: false, - offset: 18, + // The tail is off (index.css), and it used to hold ten of these pixels + // itself — without them the card sat almost on top of the marker. + offset: 26, maxWidth: '240px', className: 'trek-map-popup', }) diff --git a/client/src/index.css b/client/src/index.css index b73747608..9f6c4ce3b 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -46,12 +46,13 @@ body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); } +/* No speech-bubble tail on the hover card. It is a label that follows the + cursor onto whatever it is over, not a popup anchored to one spot, and the + tail read as a stray notch hanging off the bottom edge. The popup's own + offset carries the gap to the marker instead. */ .trek-map-popup .mapboxgl-popup-tip, .trek-map-popup .maplibregl-popup-tip { - border-top-color: #fff; - border-bottom-color: #fff; - border-left-color: #fff; - border-right-color: #fff; + display: none; } .atlas-tooltip {