fix: adjust dropdown menu width and layout for better responsiveness

- Set fixed min-width (150px) and max-width (200px) for the dropdown menu to ensure it does not expand too much on smaller screens.
- Removed flex-grow from dropdown to prevent it from taking excess space.
- Improved flex layout between dropdown, EditModeToggle, and expand icon to ensure proper spacing and alignment.

components/DataSheet.js

@@ -98,10 +98,15 @@ function DataSheet() {
   };
 
   return (
-    <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg">
+    <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] 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">
-          <select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold">
+        <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" }} // Hier die Breite des Dropdowns anpassen
+          >
             <option value="Station wählen">Station wählen</option>
             {stationListing.map((station) => (
               <option key={station.id} value={station.id}>
@@ -109,8 +114,10 @@ function DataSheet() {
               </option>
             ))}
           </select>
-          <EditModeToggle />
-          <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
+          <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>

components/EditModeToggle.js

@@ -1,5 +1,5 @@
+// /components/EditModeToggle.js
 import React, { useState, useEffect } from "react";
-import DesignServicesIcon from "@mui/icons-material/DesignServices";
 import EditOffIcon from "@mui/icons-material/EditOff";
 import ModeEditIcon from "@mui/icons-material/ModeEdit";
 import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI