style: alle Icons Panels in gleiche Position bringen

components/mainComponent/MapComponent.js

@@ -1203,7 +1203,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         >
           <MapMarkerIcon className="h-8 w-8" />
         </button>
-        {overlay === "area" && <AreaDropdown onClose={() => setOverlay(null)} />}
         {/*Lupe: Koordinatensuche ein-/ausblenden */}
         <button
           onClick={() => setOverlay(prev => (prev === "coord" ? null : "coord"))}
@@ -1267,6 +1266,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           />
         </button>
       </div>
+      {/* Marker/AreaDropdown Panel außerhalb der Button-Leiste platzieren, damit die Position mit den anderen Panels identisch ist */}
+      {overlay === "area" && <AreaDropdown onClose={() => setOverlay(null)} />}
       {/* BaseMapPanel entfernt */}
       <CoordinatePopup isOpen={isPopupOpen} coordinates={currentCoordinates} onClose={closePopup} />
 

components/uiWidgets/AreaDropdown.js

@@ -54,8 +54,8 @@ const AreaDropdown = ({ onClose }) => {
   }, [onClose]);
 
   return (
-    <div className="absolute top-16 right-3 z-[60]">
-      <div className="bg-white rounded-md shadow-lg p-3 border border-gray-200 min-w-[220px]">
+    <div className="absolute top-16 right-3 w-72 z-50 bg-white rounded-lg shadow-md">
+      <div className="flex flex-col gap-4 p-4">
         <div className="text-sm font-semibold mb-2">Station wählen</div>
         <select
           onChange={handleChange}

components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

@@ -275,48 +275,8 @@ function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
 
   //---------------------------
   return (
-    <div
-      id="mainDataSheet"
-      className="absolute top-16 right-3 w-1/6 min-w-[300px] max-w-[200px] z-10 bg-white p-2 rounded-lg shadow-lg"
-    >
-      <div className="flex flex-col gap-4 p-4">
-        <div className="flex items-center justify-between space-x-2">
-          {/* 
-                  <select
-            onChange={handleAreaChange}
-            id="stationListing"
-            className="border-solid-1 p-2 rounded ml-1 font-semibold"
-            style={{ minWidth: "150px", maxWidth: "200px" }}
-          >
-            <option value="Station wählen">Station wählen</option>
-
-            {[
-              ...new Map(
-                (GisStationsStaticDistrict.Points || [])
-                  .filter(p => !!p.Area_Name)
-                  .map(p => [p.Area_Name, p])
-              ).values(),
-            ].map(item => (
-              <option key={item.Area_Name} value={item.IdLD}>
-                {item.Area_Name}
-              </option>
-            ))}
-          </select>
-        */}
-
-          {/*
-          <div className="flex items-center space-x-2">
-            <EditModeToggle />
-            <img
-              src="/img/expand-icon.svg"
-              alt="Expand"
-              className="h-6 w-6 cursor-pointer"
-              onClick={handleIconClick}
-            />
-          </div>
-          */}
-        </div>
-
+    <div className="absolute top-16 right-3 w-72 z-50 bg-white rounded-lg shadow-md">
+      <div id="mainDataSheet" className="flex flex-col gap-4 p-4">
         {/* Checkboxen mit Untermenüs */}
         <div className="flex flex-col gap-2">
           {systemListing.map(system => (