feat: Fullscreen-Toggle für Chart-Modal hinzugefügt

- Neuer Fullscreen-Button oben rechts hinzugefügt
- State `isFullScreen` eingeführt zur Steuerung der Modal-Größe
- Dynamische Anpassung der Modal-Stile für Vollbildmodus
- Smooth-Transition für ein weiches Umschalten zwischen Normal- und Fullscreen-Modus

components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx

@@ -1,5 +1,5 @@
-"useClient"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx
+"use client"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx
-import React, { useEffect } from "react";
+import React, { useState } from "react";
 import ReactModal from "react-modal";
 import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
 import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
@@ -19,13 +19,19 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
   const activeMode = useSelector(
     (state: RootState) => state.kueChartMode.activeMode
   );
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
-  // **Neue Funktion: Modal schließen + Redux-Status zurücksetzen**
+  // **Modal schließen + Redux-Status zurücksetzen**
   const handleClose = () => {
     dispatch(setChartOpen(false)); // Schalter zurücksetzen
     onClose(); // Originale Schließen-Funktion aufrufen
   };
 
+  // **Vollbildmodus umschalten**
+  const toggleFullScreen = () => {
+    setIsFullScreen(!isFullScreen);
+  };
+
   return (
     <ReactModal
       isOpen={isOpen}
@@ -39,15 +45,32 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           bottom: "auto",
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: "100%",
+          width: isFullScreen ? "100vw" : "70rem",
-          maxWidth: "70rem",
+          height: isFullScreen ? "100vh" : "35rem",
-          height: "35rem",
           padding: "1rem",
+          transition: "all 0.3s ease-in-out",
         },
       }}
     >
+      {/* Schließen-Button */}
       <button
-        onClick={handleClose} // Hier `handleClose` statt `onClose`
+        onClick={handleClose}
+        style={{
+          position: "absolute",
+          top: "0.625rem",
+          right: "3rem",
+          background: "transparent",
+          border: "none",
+          fontSize: "1.5rem",
+          cursor: "pointer",
+        }}
+      >
+        <i className="bi bi-x-circle-fill"></i>
+      </button>
+
+      {/* Fullscreen-Button */}
+      <button
+        onClick={toggleFullScreen}
         style={{
           position: "absolute",
           top: "0.625rem",
@@ -58,7 +81,11 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           cursor: "pointer",
         }}
       >
-        <i className="bi bi-x-circle-fill"></i>
+        <i
+          className={
+            isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
+          }
+        ></i>
       </button>
 
       {/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}