fix widget focus interactions

apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css

@@ -35,7 +35,7 @@
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--mantine-z-index-modal) - 1);
+  z-index: calc(var(--mantine-z-index-popover) - 1);
   width: auto;
   height: auto;
   pointer-events: none;

apps/nextjs/src/components/board/advanced-focus/context.tsx

@@ -201,7 +201,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
             data-advanced-focus-overlay
             backgroundOpacity={0.38}
             blur={0}
-            zIndex="calc(var(--mantine-z-index-modal) - 2)"
+            zIndex="calc(var(--mantine-z-index-popover) - 2)"
             className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
             aria-hidden
           />

apps/nextjs/src/components/board/advanced-focus/wheel.ts

@@ -0,0 +1,30 @@
+const canScrollVertically = (element: HTMLElement, delta: number) => {
+  if (element.scrollHeight <= element.clientHeight) return false;
+
+  const overflowY = getComputedStyle(element).overflowY;
+  if (overflowY !== "auto" && overflowY !== "scroll") return false;
+
+  return delta < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight;
+};
+
+export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null, delta: number) => {
+  if (delta === 0) return false;
+
+  let current = target instanceof HTMLElement ? target : null;
+  while (current && root.contains(current)) {
+    if (canScrollVertically(current, delta)) {
+      current.scrollTop += delta;
+      return true;
+    }
+    if (current === root) break;
+    current = current.parentElement;
+  }
+
+  const viewport = [...root.querySelectorAll<HTMLElement>("[data-scrollbars='y'], [data-scrollbars='xy']")].find(
+    (element) => canScrollVertically(element, delta),
+  );
+  if (!viewport) return false;
+
+  viewport.scrollTop += delta;
+  return true;
+};