chore(release): ship map detail dismiss to production

learnings/2026-10-01-map-detail-dismiss-stacking.md

@@ -0,0 +1,12 @@
+# Map tap detail: dismiss + stacking (2026-10-01)
+
+## Symptom
+Tapping the map opened a country/feature detail popup that stayed overlaid on other UI, with no clear way to dismiss when moving on.
+
+## Fix
+- Drop `.country-border-popup` z-index from 1000 → 8 (below mode sheet / tab bar / layer widget).
+- `closeOnMove: true`, `closeOnClick: true`, `closeButton: true` on the MapLibre Popup.
+- Empty-map tap calls `popup.remove()` so a leftover detail cannot linger.
+
+## Gate
+Open detail → pan or tap elsewhere → detail gone; chrome (sheet, layers) stays above the popup.

src/map/MapProvider.tsx

@@ -167,9 +167,13 @@ export function MapProvider({ children }: { children: ReactNode }) {
       countryMarkers.forEach(({ marker }) => marker.addTo(map));
 
       // Click handler on country shading to show info popup
+      // closeOnMove + closeOnClick: dismiss when the user pans or taps elsewhere.
+      // closeButton: explicit close. Z-index stays below mode sheet / chrome (see CSS).
       const popup = new maplibregl.Popup({
-        closeButton: false,
+        closeButton: true,
         closeOnClick: true,
+        closeOnMove: true,
+        maxWidth: '280px',
         className: 'country-border-popup',
       });
 
@@ -288,8 +292,11 @@ export function MapProvider({ children }: { children: ReactNode }) {
               </div>
             `;
             popup.setLngLat(e.lngLat).setHTML(content).addTo(map);
+            return;
           }
         }
+        // Empty map tap — clear any open detail so chrome stays usable.
+        popup.remove();
       });
 
       // Hover handler to dynamically change the cursor to a pointer when

src/styles/global.css

@@ -193,9 +193,23 @@ a {
   pointer-events: none; /* never intercept a map click */
 }
 
-/* Custom country border details popup */
+/* Custom country border details popup.
+   Keep below mode sheet (12), tab bar (20), travel strip (26), and the
+   floating layer widget (100) so the detail never buries chrome. */
 .country-border-popup {
-  z-index: 1000;
+  z-index: 8;
+}
+.country-border-popup .maplibregl-popup-close-button {
+  color: var(--text-muted);
+  font-size: 1.1rem;
+  padding: 0.15rem 0.45rem;
+  right: 0;
+  top: 0;
+}
+.country-border-popup .maplibregl-popup-close-button:hover,
+.country-border-popup .maplibregl-popup-close-button:focus-visible {
+  color: var(--text);
+  background: transparent;
 }
 .country-border-popup .maplibregl-popup-content {
   background: var(--surface);