fix: Kabelüberwachung: Modal springt hin und her

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

@@ -50,7 +50,10 @@ export default function Knotenpunkte({ slot }: Props) {
   }, [slot]);
 
   return (
-    <div className="space-y-4 text-sm laptop:text-base">
+    <div
+      className="space-y-2 text-sm laptop:text-base"
+      style={{ maxHeight: "calc(75vh - 4rem)", overflowY: "auto" }}
+    >
       {/*
             <h2 className="text-base laptop:text-lg font-semibold">
         Knotenpunkte & Verbindungen – Slot {slot + 1}

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

@@ -133,7 +133,10 @@ export default function KueEinstellung({
   };
 
   return (
-    <div className="text-black space-y-6">
+    <div
+      className="overflow-y-auto"
+      style={{ maxHeight: "55vh" }} // oder z. B. 600px
+    >
       <div>
         <label className="font-bold">Kabelbezeichnung:</label>
         <input

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")}
+          { label: "KUE Einstellung", key: "kue" },
-          className={`px-4 py-1 rounded-t font-bold text-base ${
+          { label: "TDR Einstellung", key: "tdr" },
-            activeTab === "kue"
+          { label: "Knotenpunkte", key: "knoten" },
-              ? "bg-white text-blue-600"
+        ].map(({ label, key }) => (
-              : "text-gray-500 hover:text-black"
+          <button
-          }`}
+            key={key}
-        >
+            onClick={() => setActiveTab(key as any)}
-          KUE Einstellung
+            className={`px-4 py-1 rounded-t font-bold text-sm ${
-        </button>
+              activeTab === key
-        <button
+                ? "bg-white text-blue-600"
-          onClick={() => setActiveTab("tdr")}
+                : "text-gray-500 hover:text-black"
-          className={`px-4 py-1 rounded-t font-bold text-sm ${
+            }`}
-            activeTab === "tdr"
+          >
-              ? "bg-white text-blue-600"
+            {label}
-              : "text-gray-500 hover:text-black"
+          </button>
-          }`}
+        ))}
-        >
-          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>
       </div>
 
-      <div className="p-4 bg-white rounded-b-md max-h-[75vh] overflow-y-auto">
+      <div className="p-4 bg-white rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto">
-        <div style={{ display: activeTab === "kue" ? "block" : "none" }}>
+        {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} />
         )}

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

@@ -243,7 +243,7 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
         </div>
       </div>
 
-      <div className="pt-4 flex justify-end">
+      <div className="qhd:pt-48  2xl:pt-16  xl:pt-8 laptop:pt-2 flex justify-end">
         <button
           onClick={handleSave}
           className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-700"

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.355";
+const webVersion = "1.6.356";
 export default webVersion;