fix: Kabelüberwachung: Modal springt hin und her

components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx

@@ -13,7 +13,6 @@ interface KueModalProps {
 }
 
 export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
-  // 🧠 Tab wird initial nur einmal aus globalem Speicher geladen
   const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">(() => {
     if (typeof window !== "undefined" && (window as any).__lastKueTab) {
       return (window as any).__lastKueTab;
@@ -21,12 +20,12 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
     return "kue";
   });
 
-  // 🔁 Bei jeder Tab-Änderung speichern wir ihn global
   useEffect(() => {
     if (typeof window !== "undefined") {
       (window as any).__lastKueTab = activeTab;
     }
   }, [activeTab]);
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       window.kabelModalOpen = showModal;
@@ -46,8 +45,6 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
         content: {
           top: "50%",
           left: "50%",
-          right: "auto",
-          bottom: "auto",
           transform: "translate(-50%, -50%)",
           width: "90%",
           maxWidth: "850px",
@@ -55,6 +52,8 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
           border: "none",
           borderRadius: "8px",
           position: "relative",
+          bottom: "auto",
+          right: "auto",
         },
       }}
     >
@@ -66,48 +65,34 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
       </div>
 
       <div className="flex justify-center bg-gray-100 space-x-2 p-2">
-        <button
-          onClick={() => setActiveTab("kue")}
-          className={`px-4 py-1 rounded-t font-bold text-base ${
-            activeTab === "kue"
-              ? "bg-white text-blue-600"
-              : "text-gray-500 hover:text-black"
-          }`}
-        >
-          KUE Einstellung
-        </button>
-        <button
-          onClick={() => setActiveTab("tdr")}
-          className={`px-4 py-1 rounded-t font-bold text-sm ${
-            activeTab === "tdr"
-              ? "bg-white text-blue-600"
-              : "text-gray-500 hover:text-black"
-          }`}
-        >
-          TDR Einstellung
-        </button>
-        <button
-          onClick={() => setActiveTab("knoten")}
-          className={`px-4 py-1 rounded-t font-bold text-sm ${
-            activeTab === "knoten"
-              ? "bg-white text-blue-600"
-              : "text-gray-500 hover:text-black"
-          }`}
-        >
-          Knotenpunkte
-        </button>
+        {[
+          { label: "KUE Einstellung", key: "kue" },
+          { label: "TDR Einstellung", key: "tdr" },
+          { label: "Knotenpunkte", key: "knoten" },
+        ].map(({ label, key }) => (
+          <button
+            key={key}
+            onClick={() => setActiveTab(key as any)}
+            className={`px-4 py-1 rounded-t font-bold text-sm ${
+              activeTab === key
+                ? "bg-white text-blue-600"
+                : "text-gray-500 hover:text-black"
+            }`}
+          >
+            {label}
+          </button>
+        ))}
       </div>
 
-      <div className="p-4 bg-white rounded-b-md max-h-[75vh] overflow-y-auto">
-        <div style={{ display: activeTab === "kue" ? "block" : "none" }}>
+      <div className="p-4 bg-white rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto">
+        {activeTab === "kue" && (
           <KueEinstellung
             slot={slot}
-            showModal={showModal} // ← hier übergeben
+            showModal={showModal}
             onModulNameChange={(id) => console.log("Modulname geändert:", id)}
             onClose={onClose}
           />
-        </div>
-
+        )}
         {activeTab === "tdr" && (
           <TdrEinstellung slot={slot} onClose={onClose} />
         )}