From d5b6e2831124f943ad4fba89c79c788b14a215a9 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Wed, 20 Aug 2025 23:56:27 +0400
Subject: [PATCH] fix: fixed boards scroll

---
 .../shared/Boards/Boards.module.css           |  5 +++
 .../deals/components/shared/Boards/Boards.tsx | 35 ++++++++-----------
 .../deals/components/shared/Header/Header.tsx |  1 +
 3 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 src/app/deals/components/shared/Boards/Boards.module.css

diff --git a/src/app/deals/components/shared/Boards/Boards.module.css b/src/app/deals/components/shared/Boards/Boards.module.css
new file mode 100644
index 0000000..8a845a2
--- /dev/null
+++ b/src/app/deals/components/shared/Boards/Boards.module.css
@@ -0,0 +1,5 @@
+.container {
+    @media (min-width: 48em) {
+        max-width: calc(100vw - 450px);
+    }
+}
diff --git a/src/app/deals/components/shared/Boards/Boards.tsx b/src/app/deals/components/shared/Boards/Boards.tsx
index c62dec6..f58ed6f 100644
--- a/src/app/deals/components/shared/Boards/Boards.tsx
+++ b/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
-                    align={"end"}
-                    wrap={"nowrap"}
-                    gap={0}>
-                    <SortableDnd
-                        initialItems={boards}
-                        renderItem={renderBoard}
-                        onDragEnd={onDragEnd}
-                        onItemClick={selectBoard}
-                        containerStyle={{ flexWrap: "nowrap" }}
-                        dragHandleStyle={{ cursor: "pointer" }}
-                        disabled={isMobile}
-                    />
-                </Group>
+                <SortableDnd
+                    initialItems={boards}
+                    renderItem={renderBoard}
+                    onDragEnd={onDragEnd}
+                    onItemClick={selectBoard}
+                    containerStyle={{ flexWrap: "nowrap" }}
+                    dragHandleStyle={{ cursor: "pointer" }}
+                    disabled={isMobile}
+                />
             </ScrollArea>
-            <Space w={"md"}/>
             <CreateBoardButton />
-            <Space w={"md"}/>
-
-        </>
+        </Flex>
     );
 };
 
diff --git a/src/app/deals/components/shared/Header/Header.tsx b/src/app/deals/components/shared/Header/Header.tsx
index 83d12d8..5263948 100644
--- a/src/app/deals/components/shared/Header/Header.tsx
+++ b/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>