app: disable pointer events on popup unless it is frozen (#537)

app/src/MaplibreMap.tsx

@@ -460,6 +460,9 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
     });
 
     map.on("click", (e) => {
+      popupFrozen
+        ? popup.removeClassName("frozen")
+        : popup.addClassName("frozen");
       setPopupFrozen((p) => !p);
     });
 

app/src/stitches.config.ts

@@ -61,4 +61,10 @@ export const globalStyles = globalCss({
     color: "$white",
     fontFamily: "sans-serif",
   },
+  ".maplibregl-popup .maplibregl-popup-content": {
+    pointerEvents: "none",
+  },
+  ".maplibregl-popup.frozen .maplibregl-popup-content": {
+    pointerEvents: "auto",
+  },
 });