fix: fixed boards scroll

src/app/deals/components/shared/Boards/Boards.module.css

@@ -0,0 +1,5 @@
+.container {
+    @media (min-width: 48em) {
+        max-width: calc(100vw - 450px);
+    }
+}

src/app/deals/components/shared/Boards/Boards.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import React from "react";
-import { Group, ScrollArea, Space } from "@mantine/core";
+import { Flex, ScrollArea } from "@mantine/core";
 import Board from "@/app/deals/components/shared/Board/Board";
 import CreateBoardButton from "@/app/deals/components/shared/CreateBoardButton/CreateBoardButton";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import SortableDnd from "@/components/dnd/SortableDnd";
 import useIsMobile from "@/hooks/useIsMobile";
 import { BoardSchema } from "@/lib/client";
+import styles from "./Boards.module.css";
 
 const Boards = () => {
     const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
@@ -24,31 +25,25 @@ const Boards = () => {
     };
 
     return (
-        <>
+        <Flex
+            align={"end"}
+            className={styles.container}>
             <ScrollArea
                 offsetScrollbars={"x"}
                 scrollbars={"x"}
                 scrollbarSize={0}>
-                <Group
+                <SortableDnd
-                    align={"end"}
+                    initialItems={boards}
-                    wrap={"nowrap"}
+                    renderItem={renderBoard}
-                    gap={0}>
+                    onDragEnd={onDragEnd}
-                    <SortableDnd
+                    onItemClick={selectBoard}
-                        initialItems={boards}
+                    containerStyle={{ flexWrap: "nowrap" }}
-                        renderItem={renderBoard}
+                    dragHandleStyle={{ cursor: "pointer" }}
-                        onDragEnd={onDragEnd}
+                    disabled={isMobile}
-                        onItemClick={selectBoard}
+                />
-                        containerStyle={{ flexWrap: "nowrap" }}
-                        dragHandleStyle={{ cursor: "pointer" }}
-                        disabled={isMobile}
-                    />
-                </Group>
             </ScrollArea>
-            <Space w={"md"}/>
             <CreateBoardButton />
-            <Space w={"md"}/>
+        </Flex>
-
-        </>
     );
 };
 

src/app/deals/components/shared/Header/Header.tsx

@@ -36,6 +36,7 @@ const Header = () => {
                         data={projects}
                         value={selectedProject}
                         onChange={value => value && setSelectedProject(value)}
+                        style={{ minWidth: 200 }}
                     />
                 </Flex>
             </Flex>