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,15 +25,13 @@ const Boards = () => {
     };
 
     return (
-        <>
+        <Flex
+            align={"end"}
+            className={styles.container}>
             <ScrollArea
                 offsetScrollbars={"x"}
                 scrollbars={"x"}
                 scrollbarSize={0}>
-                <Group
-                    align={"end"}
-                    wrap={"nowrap"}
-                    gap={0}>
                 <SortableDnd
                     initialItems={boards}
                     renderItem={renderBoard}
@@ -42,13 +41,9 @@ const Boards = () => {
                     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>