fixups

Author: stronk-dev

src/components/WorldMap.css

@@ -16,7 +16,7 @@
 
 /* Side panel styling */
 .side-panel {
-  width: 30%;
+  width: 400px;
   height: 100%;
   background-color: var(--darker);
   color: var(--text-color);
@@ -138,17 +138,18 @@
 /* Map controls styling */
 .controls {
   position: absolute;
-  top: 20px;
+  bottom: 20px;
   left: 20px;
   z-index: 1000;
+  background-color: var(--darkest);
 }
 
 .controls input[type="text"] {
   padding: 10px;
   font-size: 14px;
   border-radius: 5px;
-  border: 1px solid var(--border-color);
-  background-color: var(--input-background);
+  border: 1px solid var(--darker);
+  background-color: var(--dark);
   color: var(--text-color);
 }
 

src/components/WorldMap.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-markercluster";
 import "leaflet/dist/leaflet.css";
@@ -155,6 +155,11 @@ const WorldMap = ({ orchestrators, selectedKPI }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedData, setSelectedData] = useState(null);
 
+  // Set initial position once when parentRef becomes available
+  useEffect(() => {
+    setSelectedData(null);
+  }, [selectedKPI]);
+
   const interpolateColor = (score) => {
     const startColor = [247, 118, 142];
     const endColor = [115, 218, 202];
@@ -221,7 +226,7 @@ const WorldMap = ({ orchestrators, selectedKPI }) => {
           center={[52.378, 4.9]}
           maxZoom={10}
           minZoom={2}
-          style={{ height: "100%", width: selectedData ? "70%" : "100%" }} // Adjust width based on side panel
+          style={{ height: "100%", width: "100%" }}
         >
           {/* Dark Theme Tiles */}
           <TileLayer