fix scroll bug

src/features/core/components/pullable.tsx

@@ -85,6 +85,55 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
 		return () => void ac.abort();
 	}, []);
 
+  // Fix wheel scrolling over child elements
+  useEffect(() => {
+    const scrollWrapper = document.getElementById('scroll-wrapper');
+    if (!scrollWrapper) return;
+
+    const viewport = scrollWrapper.querySelector('.mantine-ScrollArea-viewport') as HTMLElement;
+    if (!viewport) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      const target = e.target as HTMLElement;
+
+      // Check if the target is inside a nested scrollable container
+      let element = target;
+      while (element && element !== viewport) {
+        const overflow = window.getComputedStyle(element).overflow;
+        const overflowY = window.getComputedStyle(element).overflowY;
+        const overflowX = window.getComputedStyle(element).overflowX;
+
+        // If we found a scrollable ancestor (not the main viewport), don't interfere
+        if (
+          (overflow === 'auto' || overflow === 'scroll' ||
+           overflowY === 'auto' || overflowY === 'scroll' ||
+           overflowX === 'auto' || overflowX === 'scroll') &&
+          element !== viewport
+        ) {
+          // Check if this element can actually scroll in the wheel direction
+          const canScrollY = element.scrollHeight > element.clientHeight;
+          const canScrollX = element.scrollWidth > element.clientWidth;
+
+          if ((e.deltaY !== 0 && canScrollY) || (e.deltaX !== 0 && canScrollX)) {
+            return; // Let the nested scroller handle it
+          }
+        }
+
+        element = element.parentElement as HTMLElement;
+      }
+
+      // No nested scroller found, scroll the main viewport
+      viewport.scrollTop += e.deltaY;
+      viewport.scrollLeft += e.deltaX;
+    };
+
+    scrollWrapper.addEventListener('wheel', handleWheel, { passive: true });
+
+    return () => {
+      scrollWrapper.removeEventListener('wheel', handleWheel);
+    };
+  }, []);
+
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       if (scrollAreaRef.current) {
@@ -129,8 +178,15 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
         onScrollPositionChange={onScrollPositionChange}
         type='never' mah='100%' h='100%'
         pt={(scrolling || scrollY > 40) || !isRefreshing ? 0 : 40 - scrollY}
+        styles={{
+          viewport: {
+            '& > *': {
+              pointerEvents: 'auto'
+            }
+          }
+        }}
       >
-        <Box pt='1rem'pb='0.285rem' mih={height} style={{ boxSizing: 'content-box' }}>
+        <Box pt='1rem'pb='0.285rem' mih={height} style={{ boxSizing: 'content-box', pointerEvents: 'auto' }}>
           {children}
         </Box>
       </ScrollArea>