fix: boards gap on mobile fixed

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;
+    }
 }

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>
+                <Group
+                    wrap={"nowrap"}
+                    gap={0}
+                    align={"end"}>
                     <Boards />
+                    {spacer}
+                </Group>
             </>
         );
     };