Fix map symbols appearing on top of windows

src/components/Map/MapEdgeTooltip.tsx

@@ -11,7 +11,7 @@ export const MapEdgeTooltip = ({ hoverInfo }: IMapEdgeTooltip) => {
 
   return (
     <div
-      className="pointer-events-none absolute z-10 text-center whitespace-nowrap px-2 py-1 default-overlay text-xs text-gray-500"
+      className="pointer-events-none absolute z-10 text-center whitespace-nowrap px-2 py-1 default-overlay text-xs text-gray-500 z-[inherit]"
       style={{ left: x, top: y }}
     >
       <p>SNR: {snr ?? "UNK"}</p>

src/components/Map/MapNodeTooltip.tsx

@@ -24,7 +24,7 @@ export const MapNodeTooltip = ({ hoverInfo }: IMapNodeTooltip) => {
 
   return (
     <div
-      className="pointer-events-none absolute z-10 text-center whitespace-nowrap px-2 py-1 default-overlay text-xs text-gray-500"
+      className="pointer-events-none absolute z-10 text-center whitespace-nowrap px-2 py-1 default-overlay text-xs text-gray-500 z-[inherit]"
       style={{ left: x, top: y }}
     >
       <p>Name: {nodeInfo.user?.longName ?? "UNK"}</p>

src/components/Map/MapSelectedNodeMenu.tsx

@@ -81,7 +81,7 @@ export const MapSelectedNodeMenu = () => {
   };
 
   return (
-    <div className="absolute top-24 right-9 bg-white dark:bg-gray-800 p-5 pl-4 rounded-lg drop-shadow-lg w-80">
+    <div className="absolute top-24 right-9 bg-white dark:bg-gray-800 p-5 pl-4 rounded-lg drop-shadow-lg w-80 z-[inherit]">
       <div className="flex justify-between">
         <h1 className="text-gray-600 dark:text-gray-400 text-2xl leading-5 font-semibold">
           {deviceName}

src/components/Map/MapView.css

@@ -126,3 +126,7 @@
     color: rgb(209 213 219 / var(--tw-text-opacity)) !important;
   }
 }
+
+#deckgl-overlay {
+  z-index: 10;
+}

src/components/Map/MapView.tsx

@@ -161,8 +161,10 @@ export const MapView = () => {
           className="relative w-full h-full z-0"
           onContextMenu={(e) => e.preventDefault()}
         >
-          {nodeHoverInfo && <MapNodeTooltip hoverInfo={nodeHoverInfo} />}
-          {edgeHoverInfo && <MapEdgeTooltip hoverInfo={edgeHoverInfo} />}
+          <div className="z-40">
+            {nodeHoverInfo && <MapNodeTooltip hoverInfo={nodeHoverInfo} />}
+            {edgeHoverInfo && <MapEdgeTooltip hoverInfo={edgeHoverInfo} />}
+          </div>
 
           {/* Map translation is a pain, assuming users will use translated map tiles https://maplibre.org/maplibre-gl-js/docs/examples/language-switch/ */}
 
@@ -183,6 +185,7 @@ export const MapView = () => {
               <Marker
                 latitude={lastRightClickLngLat.lat}
                 longitude={lastRightClickLngLat.lng}
+                style={{ zIndex: 30 }}
               >
                 <div className="translate-y-1/2">
                   {/* https://www.kindacode.com/article/how-to-create-triangles-with-tailwind-css-4-examples/ */}
@@ -244,22 +247,23 @@ export const MapView = () => {
                       ),
                     )
                   }
+                  style={{ zIndex: 10 }}
                 />
               ))}
           </Map>
 
-          {/* Popups */}
-          {showInfoPane === "waypoint" ? (
-            <WaypointMenu
-              editWaypoint={(w) => {
-                setWaypointDialogOpen(true);
-                setEditingWaypoint(w);
-              }}
-            />
-          ) : null}
-
-          <NodeSearchDock />
-          <MapSelectedNodeMenu />
+          <div className="z-20">
+            <NodeSearchDock />
+            <MapSelectedNodeMenu />
+            {showInfoPane === "waypoint" ? (
+              <WaypointMenu
+                editWaypoint={(w) => {
+                  setWaypointDialogOpen(true);
+                  setEditingWaypoint(w);
+                }}
+              />
+            ) : null}
+          </div>
         </div>
 
         {(lastRightClickLngLat || editingWaypoint) && (

src/components/NodeSearch/NodeSearchDock.tsx

@@ -146,7 +146,7 @@ export const NodeSearchDock = () => {
   };
 
   return (
-    <div className="absolute left-9 top-9 w-96 flex flex-col p-4 gap-4">
+    <div className="absolute left-9 top-9 w-96 flex flex-col p-4 gap-4 z-[inherit]">
       <div className="flex flex-row gap-4">
         <NodeSearchInput
           query={query}

src/components/Waypoints/MeshWaypoint.tsx

@@ -5,7 +5,7 @@ import { WaypointIcon } from "@components/Waypoints/WaypointIcon";
 
 // This component returns a marker for each individual waypoint. It is called from MapView.tsx
 export interface IMeshWaypointProps
-  extends Pick<MarkerProps, "draggable" | "onDragEnd"> {
+  extends Pick<MarkerProps, "draggable" | "onDragEnd" | "style"> {
   waypoint: app_device_NormalizedWaypoint;
   isSelected: boolean;
   onClick?: () => void;

src/components/Waypoints/WaypointMenu.tsx

@@ -65,7 +65,7 @@ export const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
     activeWaypoint;
 
   return (
-    <div className="absolute top-24 right-9 bg-white dark:bg-gray-800 p-6 rounded-lg drop-shadow-lg w-96">
+    <div className="absolute top-24 right-9 bg-white dark:bg-gray-800 p-6 rounded-lg drop-shadow-lg w-96 z-[inherit]">
       <button
         className="absolute top-6 right-6"
         type="button"