feat: scrolls for statuses and boards

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}

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

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
+        <ScrollArea
-            sensors={sensors}
+            offsetScrollbars={"x"}
-            collisionDetection={closestCorners}
+            scrollbarSize={"0.5rem"}>
-            onDragStart={handleDragStart}
+            <DndContext
-            onDragOver={handleDragOver}
+                sensors={sensors}
-            onDragEnd={handleDragEnd}>
+                collisionDetection={closestCorners}
-            <Group
+                onDragStart={handleDragStart}
-                gap={"xs"}
+                onDragOver={handleDragOver}
-                justify={"start"}>
+                onDragEnd={handleDragEnd}>
-                {statuses.map(status => (
+                <Group
-                    <StatusColumn
+                    gap={"xs"}
-                        key={status.id}
+                    wrap={"nowrap"}
-                        id={`${status.id}-status`}
+                    align={"start"}>
-                        title={status.name}
+                    {statuses.map(status => (
-                        deals={deals.filter(
+                        <StatusColumn
-                            deal => deal.statusId === status.id
+                            key={status.id}
-                        )}
+                            id={`${status.id}-status`}
-                    />
+                            title={status.name}
-                ))}
+                            deals={deals.filter(
-                <DragOverlay dropAnimation={defaultDropAnimation}>
+                                deal => deal.statusId === status.id
-                    {activeDeal ? <DealCard deal={activeDeal} /> : null}
+                            )}
-                </DragOverlay>
+                        />
-            </Group>
+                    ))}
-        </DndContext>
+                    <DragOverlay dropAnimation={defaultDropAnimation}>
+                        {activeDeal ? <DealCard deal={activeDeal} /> : null}
+                    </DragOverlay>
+                </Group>
+            </DndContext>
+        </ScrollArea>
     );
 };