feat: swiper for boards on desktop

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Group, ScrollArea } from "@mantine/core";
+import { Group } from "@mantine/core";
 import Board from "@/app/deals/components/desktop/Board/Board";
 import CreateBoardButton from "@/app/deals/components/desktop/CreateBoardButton/CreateBoardButton";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
@@ -24,31 +24,28 @@ const Boards = () => {
     };
 
     return (
-        <ScrollArea
-            offsetScrollbars={"x"}
-            scrollbars={"x"}
-            scrollbarSize={0}
-            w={"100%"}>
-            <Group
-                pr={"xs"}
-                wrap={"nowrap"}
-                gap={0}>
-                <SortableDnd
-                    initialItems={boards}
-                    renderItem={renderBoard}
-                    onDragEnd={onDragEnd}
-                    onItemClick={selectBoard}
-                    containerStyle={{
-                        flexWrap: "nowrap",
-                        gap: "var(--mantine-spacing-md)",
-                        margin: "var(--mantine-spacing-md)",
-                    }}
-                    dragHandleStyle={{ cursor: "pointer" }}
-                    disabled={isMobile}
-                />
-                <CreateBoardButton />
-            </Group>
-        </ScrollArea>
+        <Group
+            wrap={"nowrap"}
+            gap={"md"}
+            pr={"sm"}
+            style={{ maxWidth: "100%", overflow: "hidden" }}>
+            <SortableDnd
+                initialItems={boards}
+                renderItem={renderBoard}
+                onDragEnd={onDragEnd}
+                onItemClick={selectBoard}
+                containerStyle={{
+                    flexWrap: "nowrap",
+                    gap: "var(--mantine-spacing-md)",
+                    paddingBlock: "var(--mantine-spacing-md)",
+                    paddingLeft: "var(--mantine-spacing-md)",
+                }}
+                dragHandleStyle={{ cursor: "pointer" }}
+                disabled={isMobile}
+                swiperEnabled
+            />
+            <CreateBoardButton />
+        </Group>
     );
 };
 

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

@@ -28,12 +28,14 @@ const Header = () => {
                 wrap={"nowrap"}
                 pr={"md"}>
                 <Boards />
-                <ColorSchemeToggle />
-                <ProjectSelect
-                    data={projects}
-                    value={selectedProject}
-                    onChange={value => value && setSelectedProject(value)}
-                />
+                <Group wrap={"nowrap"}>
+                    <ColorSchemeToggle />
+                    <ProjectSelect
+                        data={projects}
+                        value={selectedProject}
+                        onChange={value => value && setSelectedProject(value)}
+                    />
+                </Group>
             </Group>
         );
     };