From 30f671e1c108ca82986d5f6bd9e57e319d2c273f Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 11 Sep 2024 10:57:36 +0200
Subject: [PATCH] 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      | 17 ++++++++++++-----
 components/EditModeToggle.js |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/DataSheet.js b/components/DataSheet.js
index 80d875dd8..2bdee6ec0 100644
--- a/components/DataSheet.js
+++ b/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>
diff --git a/components/EditModeToggle.js b/components/EditModeToggle.js
index 051fac5d0..289a5e8fc 100644
--- a/components/EditModeToggle.js
+++ b/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