try and make preset menu always clickable

dicom-viewer/src/App.tsx

@@ -407,7 +407,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
     total: number,
     windowCenter: string,
     windowWidth: string,
-    slicePosition?: number,
+    slicePosition: string,
   }>>(() =>
     Array(viewportGrid.rows * viewportGrid.cols).fill({
       index: 0,
@@ -2018,7 +2018,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
           // cursor: "pointer",
           zIndex: activeViewport === i ? 10 : 1,
         }}
-        onClick={() => setActiveViewport(i)}
+        onClick={() => {
+          setActiveViewport(i);
+          setViewportMenuOpen(false); // <-- Add this line to close the grid selector
+        }}
         onDoubleClick={() => handleDoubleClick(i)}
       >
         <button
@@ -2393,14 +2396,15 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         </div>
 
         {/* Preset menu (bottom right of viewport) */}
-        <div
+<div
   style={{
     position: "absolute",
     right: 8,
     bottom: 8,
     zIndex: 10,
+    pointerEvents: "auto", // <-- ensure pointer events are enabled
   }}
-        >
+>
   <div
     className="preset-menu"
     style={{
@@ -2413,7 +2417,9 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       cursor: "pointer",
       position: "relative",
       boxShadow: presetsOpenArr[i] ? "0 2px 8px rgba(0,0,0,0.3)" : undefined,
+      pointerEvents: "auto", // <-- ensure pointer events are enabled
     }}
+    onClick={e => e.stopPropagation()} // <-- prevent bubbling to viewport
   >
     <div
       style={{
@@ -2421,13 +2427,14 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         fontWeight: "bold",
         userSelect: "none",
       }}
-              onClick={() =>
+      onClick={e => {
+        e.stopPropagation(); // <-- prevent bubbling to viewport
         setPresetsOpenArr(prev => {
           const next = [...prev];
           next[i] = !next[i];
           return next;
-                })
-              }
+        });
+      }}
     >
       Presets
       <span style={{ float: "right", fontWeight: "normal" }}>
@@ -2444,7 +2451,9 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
           display: "flex",
           flexDirection: "column",
           zIndex: 11,
+          pointerEvents: "auto", // <-- ensure pointer events are enabled
         }}
+        onClick={e => e.stopPropagation()} // <-- prevent bubbling to viewport
       >
         {WINDOW_LEVEL_PRESETS.map((preset) => (
           <button
@@ -2462,7 +2471,8 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
               fontSize: "13px",
               opacity: 0.9,
             }}
-                    onClick={() => {
+            onClick={e => {
+              e.stopPropagation(); // <-- prevent bubbling to viewport
               handleApplyPreset(i, preset.center, preset.width);
               setPresetsOpenArr(prev => {
                 const next = [...prev];
@@ -2477,7 +2487,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       </div>
     )}
   </div>
-        </div>
+</div>
         {/* Position bar inside each viewport */}
         {viewportModes[i] === "stack" && viewportImageIds[i] && (
           <div