feat: scrolls for statuses and 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>
     );