style: KVZ Modal optisch an die anderen angepasst

2025-09-10 09:58:25 +02:00
parent 3266e8b2d5
commit 484902b788
6 changed files with 75 additions and 79 deletions
--- a/.env.development
+++ b/.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)

--- a/.env.production
+++ b/.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
--- a/CHANGELOG.md
+++ b/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
--- a/components/main/kabelueberwachung/kue705FO/Charts/KVZChart/KVZChartView.tsx
+++ b/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));
-    }
-  }, [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) {
-      console.error("❌ Fehler beim Laden der Meldungen (KVZ)", err);
+    } catch (e) {
+      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%",
-          left: "50%",
-          bottom: "auto",
-          marginRight: "-50%",
+          inset: "50% auto auto 50%",
          transform: "translate(-50%, -50%)",
-          width: isFullScreen ? "90vw" : "60rem",
-          height: isFullScreen ? "90vh" : "32rem",
-          padding: "1rem",
-          transition: "all 0.3s ease-in-out",
+          width: isFullScreen ? "90vw" : "72rem",
+          height: isFullScreen ? "90vh" : "38rem",
+          padding: 0,
+          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 */}
-      <div
-        style={{
-          position: "absolute",
-          top: "0.625rem",
-          right: "0.625rem",
-          display: "flex",
-          gap: "0.75rem",
-        }}
-      >
+      <header className="modal-header relative pr-32">
+        <h3 className="text-sm font-semibold tracking-wide">
+          KVZ Zustände & Meldungen
+        </h3>
+        <div className="absolute top-2 right-2 flex gap-2">
          <button
            onClick={toggleFullScreen}
-          style={{
-            background: "transparent",
-            border: "none",
-            fontSize: "1.5rem",
-            cursor: "pointer",
-          }}
+            className="icon-btn"
+            aria-label={isFullScreen ? "Vollbild verlassen" : "Vollbild"}
+            type="button"
          >
            <i
              className={
-              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
+                isFullScreen
+                  ? "bi bi-fullscreen-exit"
+                  : "bi bi-arrows-fullscreen"
              }
-          ></i>
+            />
          </button>
          <button
            onClick={handleClose}
-          style={{
-            background: "transparent",
-            border: "none",
-            fontSize: "1.5rem",
-            cursor: "pointer",
-          }}
+            className="icon-btn"
+            aria-label="Schließen"
+            type="button"
          >
-          <i className="bi bi-x-circle-fill"></i>
+            <i className="bi bi-x-lg" />
          </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">
+      </header>
+      <div className="flex flex-col flex-1 p-3 gap-3">
+        {/* Toolbar */}
+        <div className="w-full flex flex-wrap items-center gap-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,18 +158,16 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
              Anzeigen
            </button>
          </div>
-          <div
-            className="flex items-center justify-end"
-            style={{ width: "12rem" }}
-          >
+          <div className="flex items-center justify-end w-48">
            <FallSensors slotIndex={slotIndex} />
          </div>
        </div>
-        {/* Meldungen Bereich */}
-        <div className="flex-1 border rounded bg-white overflow-hidden">
+        <div className="flex-1 relative border border-base rounded bg-[var(--color-surface-alt)] text-fg overflow-hidden p-2">
+          <div className="w-full h-full rounded bg-[var(--color-surface)] overflow-hidden">
            <Report moduleType="KVZ" />
          </div>
        </div>
+      </div>
    </ReactModal>
  );
 };
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",