From 921ab4c89fcb0b37be2be8cdb1fa4f37772aba15 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Fri, 1 Aug 2025 12:28:40 +0400
Subject: [PATCH] feat: scrolls for statuses and boards

---
 src/app/deals/components/Boards/Boards.tsx    |  4 +-
 .../components/StatusColumn/StatusColumn.tsx  | 16 ++++--
 .../StatusColumnsDnd/StatusColumnsDnd.tsx     | 55 ++++++++++---------
 3 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/app/deals/components/Boards/Boards.tsx b/src/app/deals/components/Boards/Boards.tsx
index 2e72a49..e570612 100644
--- a/src/app/deals/components/Boards/Boards.tsx
+++ b/src/app/deals/components/Boards/Boards.tsx
@@ -20,7 +20,9 @@ const Boards = () => {
 
     return (
         <ScrollArea
-            offsetScrollbars={"y"}
+            offsetScrollbars={"x"}
+            scrollbars={"x"}
+            scrollbarSize={0}
             w={"100%"}>
             <SortableDnd
                 initialItems={boards}
diff --git a/src/app/deals/components/StatusColumn/StatusColumn.tsx b/src/app/deals/components/StatusColumn/StatusColumn.tsx
index 32c9c79..a22041d 100644
--- a/src/app/deals/components/StatusColumn/StatusColumn.tsx
+++ b/src/app/deals/components/StatusColumn/StatusColumn.tsx
@@ -4,7 +4,7 @@ import {
     SortableContext,
     verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { Box, Text } from "@mantine/core";
+import { Box, Stack, Text } from "@mantine/core";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
 import { SortableItem } from "@/components/SortableDnd/SortableItem";
 import { DealSchema } from "@/types/DealSchema";
@@ -22,13 +22,21 @@ const StatusColumn = ({ id, title, deals }: BoardSectionProps) => {
     const sortedDeals = useMemo(() => sortByLexorank(deals), [deals]);
 
     return (
-        <Box style={{ backgroundColor: "#eee", padding: 2 }}>
+        <Box
+            style={{
+                backgroundColor: "#eee",
+                padding: 2,
+                width: "15vw",
+                minWidth: 150,
+            }}>
             <Text>{title}</Text>
             <SortableContext
                 id={id}
                 items={sortedDeals}
                 strategy={verticalListSortingStrategy}>
-                <div ref={setNodeRef}>
+                <Stack
+                    gap={"xs"}
+                    ref={setNodeRef}>
                     {sortedDeals.map(deal => (
                         <Box key={deal.id}>
                             <SortableItem id={deal.id}>
@@ -36,7 +44,7 @@ const StatusColumn = ({ id, title, deals }: BoardSectionProps) => {
                             </SortableItem>
                         </Box>
                     ))}
-                </div>
+                </Stack>
             </SortableContext>
         </Box>
     );
diff --git a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
index 40ac5fd..e10b59e 100644
--- a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
+++ b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
@@ -16,7 +16,7 @@ import {
 import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
 import { throttle } from "lodash";
-import { Group } from "@mantine/core";
+import { Group, ScrollArea } from "@mantine/core";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
 import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
@@ -183,30 +183,35 @@ const StatusColumnsDnd: FC<Props> = props => {
     };
 
     return (
-        <DndContext
-            sensors={sensors}
-            collisionDetection={closestCorners}
-            onDragStart={handleDragStart}
-            onDragOver={handleDragOver}
-            onDragEnd={handleDragEnd}>
-            <Group
-                gap={"xs"}
-                justify={"start"}>
-                {statuses.map(status => (
-                    <StatusColumn
-                        key={status.id}
-                        id={`${status.id}-status`}
-                        title={status.name}
-                        deals={deals.filter(
-                            deal => deal.statusId === status.id
-                        )}
-                    />
-                ))}
-                <DragOverlay dropAnimation={defaultDropAnimation}>
-                    {activeDeal ? <DealCard deal={activeDeal} /> : null}
-                </DragOverlay>
-            </Group>
-        </DndContext>
+        <ScrollArea
+            offsetScrollbars={"x"}
+            scrollbarSize={"0.5rem"}>
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCorners}
+                onDragStart={handleDragStart}
+                onDragOver={handleDragOver}
+                onDragEnd={handleDragEnd}>
+                <Group
+                    gap={"xs"}
+                    wrap={"nowrap"}
+                    align={"start"}>
+                    {statuses.map(status => (
+                        <StatusColumn
+                            key={status.id}
+                            id={`${status.id}-status`}
+                            title={status.name}
+                            deals={deals.filter(
+                                deal => deal.statusId === status.id
+                            )}
+                        />
+                    ))}
+                    <DragOverlay dropAnimation={defaultDropAnimation}>
+                        {activeDeal ? <DealCard deal={activeDeal} /> : null}
+                    </DragOverlay>
+                </Group>
+            </DndContext>
+        </ScrollArea>
     );
 };