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
@@ -2399,6 +2402,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
     right: 8,
     bottom: 8,
     zIndex: 10,
+    pointerEvents: "auto", // <-- ensure pointer events are enabled
   }}
 >
   <div
@@ -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];