diff --git a/apps/client/src/features/base/components/views/kanban/base-kanban.tsx b/apps/client/src/features/base/components/views/kanban/base-kanban.tsx
index 6f74b8f8c..9b023c012 100644
--- a/apps/client/src/features/base/components/views/kanban/base-kanban.tsx
+++ b/apps/client/src/features/base/components/views/kanban/base-kanban.tsx
@@ -71,7 +71,7 @@ export function BaseKanban({
source.data.type === "base-kanban-column",
[],
);
- useKanbanAutoScroll(boardRef, canScrollBoard);
+ useKanbanAutoScroll(boardRef, "horizontal", canScrollBoard);
useEffect(() => {
if (!hasNextPage || isFetchingNextPage) return;
diff --git a/apps/client/src/features/base/components/views/kanban/kanban-column.tsx b/apps/client/src/features/base/components/views/kanban/kanban-column.tsx
index 1b7130b59..b67d28f64 100644
--- a/apps/client/src/features/base/components/views/kanban/kanban-column.tsx
+++ b/apps/client/src/features/base/components/views/kanban/kanban-column.tsx
@@ -40,7 +40,7 @@ export function KanbanColumn({
source.data.type === "base-kanban-card",
[],
);
- useKanbanAutoScroll(bodyRef, canScrollColumn);
+ useKanbanAutoScroll(bodyRef, "vertical", canScrollColumn);
return (
diff --git a/apps/client/src/features/base/hooks/use-kanban-auto-scroll.ts b/apps/client/src/features/base/hooks/use-kanban-auto-scroll.ts
index 004f83f55..99d1f10ea 100644
--- a/apps/client/src/features/base/hooks/use-kanban-auto-scroll.ts
+++ b/apps/client/src/features/base/hooks/use-kanban-auto-scroll.ts
@@ -7,18 +7,32 @@ type CanScrollArgs = {
source: { data: Record };
};
-// How far past each edge the cursor can roam and still drive scroll.
-// 120px gives users a generous "drag past the column" affordance before
-// scrolling stops — matches what other kanbans (Linear, Notion) do.
-const OVERFLOW_PX = 120;
+const OVERFLOW_PX = 6000;
+
+type Axis = "horizontal" | "vertical";
export function useKanbanAutoScroll(
ref: RefObject,
+ axis: Axis,
canScroll: (args: CanScrollArgs) => boolean = () => true,
) {
useEffect(() => {
const el = ref.current;
if (!el) return;
+ const overflow =
+ axis === "vertical"
+ ? {
+ forTopEdge: { top: OVERFLOW_PX, right: 0, left: 0 },
+ forBottomEdge: { bottom: OVERFLOW_PX, right: 0, left: 0 },
+ forLeftEdge: { left: 0, top: 0, bottom: 0 },
+ forRightEdge: { right: 0, top: 0, bottom: 0 },
+ }
+ : {
+ forTopEdge: { top: 0, right: 0, left: 0 },
+ forBottomEdge: { bottom: 0, right: 0, left: 0 },
+ forLeftEdge: { left: OVERFLOW_PX, top: 0, bottom: 0 },
+ forRightEdge: { right: OVERFLOW_PX, top: 0, bottom: 0 },
+ };
return combine(
autoScrollForElements({
element: el,
@@ -29,13 +43,8 @@ export function useKanbanAutoScroll(
element: el,
canScroll,
getConfiguration: () => ({ maxScrollSpeed: "fast" }),
- getOverflow: () => ({
- forTopEdge: { top: OVERFLOW_PX },
- forBottomEdge: { bottom: OVERFLOW_PX },
- forLeftEdge: { left: OVERFLOW_PX },
- forRightEdge: { right: OVERFLOW_PX },
- }),
+ getOverflow: () => overflow,
}),
);
- }, [ref, canScroll]);
+ }, [ref, axis, canScroll]);
}