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,6 +183,9 @@ const StatusColumnsDnd: FC<Props> = props => {
     };
 
     return (
+        <ScrollArea
+            offsetScrollbars={"x"}
+            scrollbarSize={"0.5rem"}>
             <DndContext
                 sensors={sensors}
                 collisionDetection={closestCorners}
@@ -191,7 +194,8 @@ const StatusColumnsDnd: FC<Props> = props => {
                 onDragEnd={handleDragEnd}>
                 <Group
                     gap={"xs"}
-                justify={"start"}>
+                    wrap={"nowrap"}
+                    align={"start"}>
                     {statuses.map(status => (
                         <StatusColumn
                             key={status.id}
@@ -207,6 +211,7 @@ const StatusColumnsDnd: FC<Props> = props => {
                     </DragOverlay>
                 </Group>
             </DndContext>
+        </ScrollArea>
     );
 };