From 226e52a1c61ff70a63222deb9c644c88497d96be Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Mon, 25 Aug 2025 20:15:31 +0400
Subject: [PATCH] fix: boards gap on mobile fixed

---
 .../shared/Boards/Boards.module.css           |  3 +++
 .../deals/components/shared/Header/Header.tsx | 20 ++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/deals/components/shared/Boards/Boards.module.css b/src/app/deals/components/shared/Boards/Boards.module.css
index 8a845a2..70b1827 100644
--- a/src/app/deals/components/shared/Boards/Boards.module.css
+++ b/src/app/deals/components/shared/Boards/Boards.module.css
@@ -2,4 +2,7 @@
     @media (min-width: 48em) {
         max-width: calc(100vw - 450px);
     }
+    @media (max-width: 48em) {
+        max-width: 100vw;
+    }
 }
diff --git a/src/app/deals/components/shared/Header/Header.tsx b/src/app/deals/components/shared/Header/Header.tsx
index 600836b..55b3e8c 100644
--- a/src/app/deals/components/shared/Header/Header.tsx
+++ b/src/app/deals/components/shared/Header/Header.tsx
@@ -16,16 +16,20 @@ const Header = () => {
     const { openDrawer } = useDrawersContext();
     const isMobile = useIsMobile();
 
+    const spacer = (
+        <Box
+            flex={1}
+            style={{ borderBottom: "2px solid gray" }}
+        />
+    );
+
     const getDesktopHeader = () => {
         return (
             <Flex
                 wrap={"nowrap"}
                 justify={"space-between"}>
                 <Boards />
-                <Box
-                    flex={1}
-                    style={{ borderBottom: "2px solid gray" }}
-                />
+                {spacer}
                 <Flex
                     align={"center"}
                     style={{
@@ -85,7 +89,13 @@ const Header = () => {
                         <IconSettings />
                     </Box>
                 </Group>
-                <Boards />
+                <Group
+                    wrap={"nowrap"}
+                    gap={0}
+                    align={"end"}>
+                    <Boards />
+                    {spacer}
+                </Group>
             </>
         );
     };