style: KVZ Modal optisch an die anderen angepasst

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.890
+NEXT_PUBLIC_APP_VERSION=1.6.891
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.890
+NEXT_PUBLIC_APP_VERSION=1.6.891
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.891] – 2025-09-10
+
+- fix: Modal jetzt wieder mit fester, konsistenter Höhe (min(640px, 80vh)) und internem Scroll statt Größenänderung pro Tab. Body-Klassen angepasst (overflow-y-auto, entfernte dynamische h-Utilities).
+
+---
 ## [1.6.890] – 2025-09-10
 
 - feat: KVZ Button für User sichtbar wenn aktiviert ist

components/main/kabelueberwachung/kue705FO/Charts/KVZChart/KVZChartView.tsx

@@ -41,20 +41,24 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
     (state: RootState) => state.dateRangePicker
   );
 
-  // Beim Öffnen Slot setzen (damit konsistent zu anderen Modals)
+  // Beim Öffnen: Slot + Standard-Datumsbereich setzen (30 Tage) – analog zu anderen Modals
   useEffect(() => {
-    if (isOpen) {
+    if (!isOpen) return;
-      dispatch(setSlotNumber(slotIndex));
+    dispatch(setSlotNumber(slotIndex));
-    }
-  }, [isOpen, slotIndex, dispatch]);
-
-  const handleClose = () => {
     const today = new Date();
     const thirtyDaysAgo = new Date();
     thirtyDaysAgo.setDate(today.getDate() - 30);
     const toISO = (d: Date) => d.toLocaleDateString("sv-SE");
+    dispatch(setVonDatum(toISO(thirtyDaysAgo)));
+    dispatch(setBisDatum(toISO(today)));
+  }, [isOpen, slotIndex, dispatch]);
 
-    // Zurücksetzen – entspricht Verhalten der anderen Modals
+  const handleClose = () => {
+    // Reset auf Default (wie andere Modals es tun)
+    const today = new Date();
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(today.getDate() - 30);
+    const toISO = (d: Date) => d.toLocaleDateString("sv-SE");
     dispatch(setVonDatum(toISO(thirtyDaysAgo)));
     dispatch(setBisDatum(toISO(today)));
     dispatch(setSelectedMode("DIA1"));
@@ -62,7 +66,6 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
     dispatch(setChartOpen(false));
     dispatch(setFullScreen(false));
     dispatch(resetBrushRange());
-
     onClose();
   };
 
@@ -74,82 +77,72 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
     try {
       dispatch(setLoading(true));
       await dispatch(getMessagesThunk({ fromDate, toDate })).unwrap();
-    } catch (err) {
+    } catch (e) {
-      console.error("❌ Fehler beim Laden der Meldungen (KVZ)", err);
+      console.error("Fehler beim Laden der KVZ Meldungen", e);
     } finally {
       dispatch(setLoading(false));
     }
   };
-
   return (
     <ReactModal
       isOpen={isOpen}
       onRequestClose={handleClose}
       ariaHideApp={false}
       style={{
-        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        overlay: {
+          backgroundColor: "rgba(0,0,0,0.55)",
+          backdropFilter: "blur(2px)",
+        },
         content: {
-          top: "50%",
+          inset: "50% auto auto 50%",
-          left: "50%",
-          bottom: "auto",
-          marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: isFullScreen ? "90vw" : "60rem",
+          width: isFullScreen ? "90vw" : "72rem",
-          height: isFullScreen ? "90vh" : "32rem",
+          height: isFullScreen ? "90vh" : "38rem",
-          padding: "1rem",
+          padding: 0,
-          transition: "all 0.3s ease-in-out",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          borderRadius: "14px",
           display: "flex",
           flexDirection: "column",
-          overflowX: "hidden",
+          overflow: "hidden",
         },
       }}
+      contentLabel="KVZ Zustände & Meldungen"
     >
-      {/* Action Buttons */}
+      <header className="modal-header relative pr-32">
-      <div
+        <h3 className="text-sm font-semibold tracking-wide">
-        style={{
+          KVZ Zustände & Meldungen
-          position: "absolute",
+        </h3>
-          top: "0.625rem",
+        <div className="absolute top-2 right-2 flex gap-2">
-          right: "0.625rem",
+          <button
-          display: "flex",
+            onClick={toggleFullScreen}
-          gap: "0.75rem",
+            className="icon-btn"
-        }}
+            aria-label={isFullScreen ? "Vollbild verlassen" : "Vollbild"}
-      >
+            type="button"
-        <button
+          >
-          onClick={toggleFullScreen}
+            <i
-          style={{
+              className={
-            background: "transparent",
+                isFullScreen
-            border: "none",
+                  ? "bi bi-fullscreen-exit"
-            fontSize: "1.5rem",
+                  : "bi bi-arrows-fullscreen"
-            cursor: "pointer",
+              }
-          }}
+            />
-        >
+          </button>
-          <i
+          <button
-            className={
+            onClick={handleClose}
-              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
+            className="icon-btn"
-            }
+            aria-label="Schließen"
-          ></i>
+            type="button"
-        </button>
+          >
-        <button
+            <i className="bi bi-x-lg" />
-          onClick={handleClose}
+          </button>
-          style={{
+        </div>
-            background: "transparent",
+      </header>
-            border: "none",
+      <div className="flex flex-col flex-1 p-3 gap-3">
-            fontSize: "1.5rem",
+        {/* Toolbar */}
-            cursor: "pointer",
+        <div className="w-full flex flex-wrap items-center gap-4">
-          }}
-        >
-          <i className="bi bi-x-circle-fill"></i>
-        </button>
-      </div>
-
-      {/* Content */}
-      <div className="flex flex-col h-full">
-        <h3 className="text-lg font-semibold mb-1">KVz Zustände & Meldungen</h3>
-
-        {/* Toolbar mit KÜ + DateRangePicker + Sensoren (analog zu anderen Modalen) */}
-        <div className="w-full flex flex-wrap items-center gap-4 mb-4">
           <div className="flex items-center gap-2">
-            <span className="text-xs font-semibold opacity-80 select-none">
+            <span className="text-xs font-semibold opacity-80 select-none text-fg-secondary">
               KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
             </span>
           </div>
@@ -165,16 +158,14 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
               Anzeigen
             </button>
           </div>
-          <div
+          <div className="flex items-center justify-end w-48">
-            className="flex items-center justify-end"
-            style={{ width: "12rem" }}
-          >
             <FallSensors slotIndex={slotIndex} />
           </div>
         </div>
-        {/* Meldungen Bereich */}
+        <div className="flex-1 relative border border-base rounded bg-[var(--color-surface-alt)] text-fg overflow-hidden p-2">
-        <div className="flex-1 border rounded bg-white overflow-hidden">
+          <div className="w-full h-full rounded bg-[var(--color-surface)] overflow-hidden">
-          <Report moduleType="KVZ" />
+            <Report moduleType="KVZ" />
+          </div>
         </div>
       </div>
     </ReactModal>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.890",
+  "version": "1.6.891",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.890",
+      "version": "1.6.891",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.890",
+  "version": "1.6.891",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",