feat: close button and maximize modal

components/main/analogInputs/AnalogInputsChartModal.tsx

@@ -21,6 +21,7 @@ export default function AnalogInputsChartModal({
   const selectedId = useSelector(
     (state: RootState) => state.analogInputsHistory.selectedId
   );
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
 
   if (!isOpen) return null;
 
@@ -34,21 +35,73 @@ export default function AnalogInputsChartModal({
       <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
       {/* Centered panel */}
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel className="bg-white w-[95vw] h-[85vh] max-w-6xl rounded-xl shadow-xl border border-gray-200 p-4 flex flex-col">
-          <div className="flex items-center justify-between mb-3">
-            <Dialog.Title className="text-lg font-semibold text-gray-700">
-              Messkurve Messwerteingang {selectedId ?? "–"}
-            </Dialog.Title>
-            <button
-              className="text-xl text-gray-500 hover:text-gray-700"
-              onClick={() => dispatch(setIsChartModalOpen(false))}
-              aria-label="Modal schließen"
+        <Dialog.Panel className="relative">
+          <div
+            className="bg-white rounded-xl shadow-xl border border-gray-200"
+            style={{
+              width: isFullscreen ? "90vw" : "70rem",
+              height: isFullscreen ? "90vh" : "35rem",
+              padding: "1rem",
+              transition: "all 0.3s ease-in-out",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            {/* Controls top-right (fullscreen + close) */}
+            <div
+              style={{
+                position: "absolute",
+                top: "0.625rem",
+                right: "0.625rem",
+                display: "flex",
+                gap: "0.75rem",
+              }}
             >
-              ✕
-            </button>
-          </div>
-          <div className="flex-1 min-h-0">
-            <AnalogInputsChart loading={loading} setLoading={setLoading} />
+              <button
+                onClick={() => setIsFullscreen((v) => !v)}
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  fontSize: "1.5rem",
+                  cursor: "pointer",
+                }}
+                title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+                aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+              >
+                <i
+                  className={
+                    isFullscreen
+                      ? "bi bi-fullscreen-exit"
+                      : "bi bi-arrows-fullscreen"
+                  }
+                ></i>
+              </button>
+              <button
+                onClick={() => dispatch(setIsChartModalOpen(false))}
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  fontSize: "1.5rem",
+                  cursor: "pointer",
+                }}
+                title="Schließen"
+                aria-label="Modal schließen"
+              >
+                <i className="bi bi-x-circle-fill"></i>
+              </button>
+            </div>
+
+            {/* Title */}
+            <div className="flex items-center justify-between mb-3 pr-14">
+              <Dialog.Title className="text-lg font-semibold text-gray-700">
+                Messkurve Messwerteingang {selectedId ?? "–"}
+              </Dialog.Title>
+            </div>
+
+            {/* Chart */}
+            <div className="flex-1 min-h-0">
+              <AnalogInputsChart loading={loading} setLoading={setLoading} />
+            </div>
           </div>
         </Dialog.Panel>
       </div>