fix: boards scrolling with wheel

src/app/deals/components/shared/Boards/Boards.tsx

@@ -6,6 +6,7 @@ import Board from "@/app/deals/components/shared/Board/Board";
 import CreateBoardButton from "@/app/deals/components/shared/CreateBoardButton/CreateBoardButton";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import SortableDnd from "@/components/dnd/SortableDnd";
+import useHorizontalWheel from "@/hooks/utils/useHorizontalWheel";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 import { BoardSchema } from "@/lib/client";
 import styles from "./Boards.module.css";
@@ -13,6 +14,7 @@ import styles from "./Boards.module.css";
 const Boards = () => {
     const { boards, setSelectedBoardId, boardsCrud } = useBoardsContext();
     const isMobile = useIsMobile();
+    const { ref, onWheel } = useHorizontalWheel<HTMLDivElement>();
 
     const renderBoard = (board: BoardSchema) => <Board board={board} />;
 
@@ -29,6 +31,8 @@ const Boards = () => {
             align={"end"}
             className={styles.container}>
             <ScrollArea
+                viewportRef={ref}
+                onWheel={onWheel}
                 offsetScrollbars={"x"}
                 scrollbars={"x"}
                 scrollbarSize={0}>

src/hooks/utils/useHorizontalWheel.ts

@@ -0,0 +1,18 @@
+import { useCallback, useRef, WheelEvent } from "react";
+
+function useHorizontalWheel<T extends HTMLElement>() {
+    const ref = useRef<T | null>(null);
+    const onWheel = useCallback((e: WheelEvent<T>) => {
+        if (!ref.current) return;
+
+        e.stopPropagation();
+        if (e.deltaY < 0) {
+            ref.current.scrollLeft -= Math.max(e.deltaY, -40);
+        } else {
+            ref.current.scrollLeft -= Math.min(e.deltaY, 40);
+        }
+    }, []);
+    return { ref, onWheel };
+}
+
+export default useHorizontalWheel;