From 44766bb7aa8048bc2ea4807e49fa91b7410d7810 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Wed, 27 Aug 2025 09:38:07 +0400
Subject: [PATCH] fix: boards scrolling with wheel

---
 .../deals/components/shared/Boards/Boards.tsx  |  4 ++++
 src/hooks/utils/useHorizontalWheel.ts          | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/hooks/utils/useHorizontalWheel.ts

diff --git a/src/app/deals/components/shared/Boards/Boards.tsx b/src/app/deals/components/shared/Boards/Boards.tsx
index 2bbe174..a2d2b4d 100644
--- a/src/app/deals/components/shared/Boards/Boards.tsx
+++ b/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}>
diff --git a/src/hooks/utils/useHorizontalWheel.ts b/src/hooks/utils/useHorizontalWheel.ts
new file mode 100644
index 0000000..f89c411
--- /dev/null
+++ b/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;