feat: scrolls for statuses and boards

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>
     );
 };