From 40be13b51a2950f2dbdfd1bade9914c8b48ec90b Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Sat, 31 May 2025 15:28:40 +0100
Subject: [PATCH] some visual tidy up

---
 dicom-viewer/src/App.tsx | 175 ++++++++++++++++++++++-----------------
 1 file changed, 100 insertions(+), 75 deletions(-)

diff --git a/dicom-viewer/src/App.tsx b/dicom-viewer/src/App.tsx
index b7dd237..6d74dee 100644
--- a/dicom-viewer/src/App.tsx
+++ b/dicom-viewer/src/App.tsx
@@ -110,6 +110,7 @@ function App() {
 
   const [settingsOpen, setSettingsOpen] = useState(false);
 
+const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
 const [openDropdownIdx, setOpenDropdownIdx] = useState<number | null>(null);
   // State for overlay info
   const [imageInfo, setImageInfo] = useState({
@@ -1147,39 +1148,51 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
           </div>
         )}
         {/* Fullscreen button below the Volume/Stack toggle */}
-        <button
-          style={{
-            position: "absolute",
-            top: 40, // below the toggle button (which is at top: 8, height: ~32)
-            left: 8,
-            zIndex: 20,
-            background: "#111",
-            color: "#fff",
-            border: "none",
-            borderRadius: "4px",
-            padding: "4px 8px",
-            cursor: "pointer",
-            fontSize: "13px",
-            opacity: 0.85,
-            marginTop: "4px",
-          }}
-          title="Toggle Fullscreen"
-          onClick={e => {
-            e.stopPropagation();
-            const el = viewportRefs.current[i];
-            if (document.fullscreenElement === el) {
-              document.exitFullscreen();
-            } else if (el?.requestFullscreen) {
-              el.requestFullscreen();
-            } else if ((el as any)?.webkitRequestFullscreen) {
-              (el as any).webkitRequestFullscreen();
-            } else if ((el as any)?.msRequestFullscreen) {
-              (el as any).msRequestFullscreen();
-            }
-          }}
-        >
-          {document.fullscreenElement === viewportRefs.current[i] ? "Exit Fullscreen" : "⛶ Fullscreen"}
-        </button>
+<button
+  style={{
+    position: "absolute",
+    top: 40,
+    left: 8,
+    zIndex: 20,
+    background: "#111",
+    color: "#fff",
+    border: "none",
+    borderRadius: "4px",
+    padding: "4px 8px",
+    cursor: "pointer",
+    fontSize: "13px",
+    opacity: 0.85,
+    marginTop: "4px",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+  }}
+  title="Toggle Fullscreen"
+  onClick={e => {
+    e.stopPropagation();
+    const el = viewportRefs.current[i];
+    if (document.fullscreenElement === el) {
+      document.exitFullscreen();
+    } else if (el?.requestFullscreen) {
+      el.requestFullscreen();
+    } else if ((el as any)?.webkitRequestFullscreen) {
+      (el as any).webkitRequestFullscreen();
+    } else if ((el as any)?.msRequestFullscreen) {
+      (el as any).msRequestFullscreen();
+    }
+  }}
+  onMouseEnter={() => setFullscreenHoverIdx(i)}
+  onMouseLeave={() => setFullscreenHoverIdx(null)}
+>
+  <span style={{ fontSize: "18px", lineHeight: 1 }}>⛶</span>
+  {fullscreenHoverIdx === i && (
+    <span style={{ marginLeft: 6 }}>
+      {document.fullscreenElement === viewportRefs.current[i]
+        ? "Exit Fullscreen"
+        : "Fullscreen"}
+    </span>
+  )}
+</button>
         {/* Overlay info (bottom left of viewport) */}
         <div
           style={{
@@ -1534,49 +1547,60 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
     }}>
       <div>
         {/* Side menu toggle button */}
-        <button
-          style={{
-            position: "absolute",
-            top: "50%",
-            transform: "translateY(-50%)",
-            left: 20,
-            zIndex: 200,
-            width: 40,
-            height: 40,
-            background: "#222",
-            color: "#fff",
-            border: "none",
-            borderRadius: "50%",
-            fontWeight: "bold",
-            cursor: "pointer",
-            fontSize: "22px",
-            boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
-            transition: "background 0.2s",
-          }}
-          onClick={() => setSideMenuOpen(open => !open)}
-          aria-label="Open menu"
-        >
-          ☰
-        </button>
+<button
+  style={{
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    left: sideMenuOpen ? 250 : -20, // Slide right when open
+    zIndex: 200,
+    width: 40,
+    height: 40,
+    background: "#222",
+    color: "#fff",
+    border: "none",
+    borderRadius: "50%",
+    fontWeight: "bold",
+    cursor: "pointer",
+    fontSize: "22px",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+    transition: "left 0.25s cubic-bezier(.4,2,.6,1), background 0.2s",
+  }}
+  onClick={() => setSideMenuOpen(open => !open)}
+  aria-label="Open menu"
+>
+  ☰
+</button>
 
-        {/* Side menu drawer */}
-        <div
-          style={{
-            position: "absolute",
-            top: 0,
-            left: sideMenuOpen ? 0 : -220,
-            width: 220,
-            height: "100%",
-            background: "#222",
-            color: "#fff",
-            zIndex: 199,
-            boxShadow: sideMenuOpen ? "2px 0 12px rgba(0,0,0,0.3)" : "none",
-            transition: "left 0.25s cubic-bezier(.4,2,.6,1)",
-            flexDirection: "column",
-            padding: "24px 16px 16px 16px",
-            display: sideMenuOpen ? "flex" : "none",
-          }}
-        >
+{/* Side menu drawer */}
+<div
+  style={{
+    position: "absolute",
+    top: 0,
+    left: sideMenuOpen ? 0 : -260,
+    width: 220,
+    height: "100%",
+    background: "#222",
+    color: "#fff",
+    zIndex: 199,
+    boxShadow: sideMenuOpen ? "2px 0 12px rgba(0,0,0,0.3)" : "none",
+    transition: "left 0.25s cubic-bezier(.4,2,.6,1)",
+    flexDirection: "column",
+    padding: "24px 16px 16px 16px",
+    display: "flex",
+    overflow: "hidden", // <-- add this
+    pointerEvents: sideMenuOpen ? "auto" : "none", // <-- add this
+  }}
+>
+  <div
+    style={{
+      flex: 1,
+      minHeight: 0,
+      overflowY: "auto", // <-- enables scrolling for menu content
+      display: "flex",
+      flexDirection: "column",
+    }}
+  >
           <div style={{ fontWeight: "bold", fontSize: 18, marginBottom: 24 }}>
             Menu
             <button
@@ -1716,6 +1740,7 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
           </button>
           {/* Add more menu items here if needed */}
 
+</div>
         </div>
       </div>
       {/* Viewport grid menu at top center */}