some visual tidy up

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({
@@ -1150,7 +1151,7 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
 <button
   style={{
     position: "absolute",
-            top: 40, // below the toggle button (which is at top: 8, height: ~32)
+    top: 40,
     left: 8,
     zIndex: 20,
     background: "#111",
@@ -1162,6 +1163,9 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
     fontSize: "13px",
     opacity: 0.85,
     marginTop: "4px",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
   }}
   title="Toggle Fullscreen"
   onClick={e => {
@@ -1177,8 +1181,17 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
       (el as any).msRequestFullscreen();
     }
   }}
+  onMouseEnter={() => setFullscreenHoverIdx(i)}
+  onMouseLeave={() => setFullscreenHoverIdx(null)}
 >
-          {document.fullscreenElement === viewportRefs.current[i] ? "Exit Fullscreen" : "⛶ Fullscreen"}
+  <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
@@ -1539,7 +1552,7 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
-            left: 20,
+    left: sideMenuOpen ? 250 : -20, // Slide right when open
     zIndex: 200,
     width: 40,
     height: 40,
@@ -1551,7 +1564,7 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
     cursor: "pointer",
     fontSize: "22px",
     boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
-            transition: "background 0.2s",
+    transition: "left 0.25s cubic-bezier(.4,2,.6,1), background 0.2s",
   }}
   onClick={() => setSideMenuOpen(open => !open)}
   aria-label="Open menu"
@@ -1564,7 +1577,7 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
   style={{
     position: "absolute",
     top: 0,
-            left: sideMenuOpen ? 0 : -220,
+    left: sideMenuOpen ? 0 : -260,
     width: 220,
     height: "100%",
     background: "#222",
@@ -1574,7 +1587,18 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
     transition: "left 0.25s cubic-bezier(.4,2,.6,1)",
     flexDirection: "column",
     padding: "24px 16px 16px 16px",
-            display: sideMenuOpen ? "flex" : "none",
+    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 }}>
@@ -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 */}