From a4bcd621894770d1c630fc0b3cd2b39690d44b3b Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Sat, 16 Aug 2025 19:03:53 +0400
Subject: [PATCH] fix: fixed scroll color and width of columns slides on
 desktop

---
 .../components/desktop/Boards/Boards.tsx      |  1 +
 .../dnd/FunnelDnd/FunnelDnd.module.css        | 10 ++++--
 src/components/dnd/FunnelDnd/FunnelDnd.tsx    | 34 ++++++-------------
 3 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/app/deals/components/desktop/Boards/Boards.tsx b/src/app/deals/components/desktop/Boards/Boards.tsx
index 8511db7..10f848b 100644
--- a/src/app/deals/components/desktop/Boards/Boards.tsx
+++ b/src/app/deals/components/desktop/Boards/Boards.tsx
@@ -30,6 +30,7 @@ const Boards = () => {
             scrollbarSize={0}
             w={"100%"}>
             <Group
+                pr={"xs"}
                 wrap={"nowrap"}
                 gap={0}>
                 <SortableDnd
diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.module.css b/src/components/dnd/FunnelDnd/FunnelDnd.module.css
index 124342d..6615dc3 100644
--- a/src/components/dnd/FunnelDnd/FunnelDnd.module.css
+++ b/src/components/dnd/FunnelDnd/FunnelDnd.module.css
@@ -13,11 +13,15 @@
     }
 }
 
-.swiper-scrollbar-drag {
+.swiperContainer :global(.swiper-scrollbar-drag) {
     @mixin dark {
-        color: var(--mantine-color-dark-7);
+        background-color: var(--mantine-color-dark-9);
     }
     @mixin light {
-        color: var(--color-light-whitesmoke);
+        background-color: grey;
     }
 }
+
+.swiperContainer :global(.swiper-slide) {
+    padding-bottom: 20px;
+}
diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx
index b5d1ae7..e6efe15 100644
--- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx
+++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx
@@ -21,7 +21,7 @@ import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay";
 import { BaseDraggable } from "@/components/dnd/types/types";
 import useIsMobile from "@/hooks/useIsMobile";
 import SortableItem from "../SortableItem";
-import "./FunnelDnd.module.css";
+import classes from "./FunnelDnd.module.css";
 
 type Props<TContainer, TItem> = {
     containers: TContainer[];
@@ -74,7 +74,9 @@ const FunnelDnd = <
             const containerItems = getItemsByContainer(container, items);
             const containerId = getContainerId(container);
             return (
-                <SwiperSlide key={containerId}>
+                <SwiperSlide
+                    style={{ width: 250 }}
+                    key={containerId}>
                     <SortableItem
                         key={containerId}
                         id={containerId}
@@ -99,6 +101,7 @@ const FunnelDnd = <
             return (
                 <Swiper
                     ref={swiperRef}
+                    className={classes.swiperContainer}
                     slidesPerView={1.2}
                     modules={[Pagination]}
                     freeMode={{ enabled: false }}
@@ -115,35 +118,20 @@ const FunnelDnd = <
         return (
             <Swiper
                 ref={swiperRef}
+                className={classes.swiperContainer}
                 modules={[Scrollbar, Mousewheel, FreeMode]}
-                breakpoints={{
-                    650: {
-                        slidesPerView: 4,
-                        spaceBetween: 15,
-                    },
-                    850: {
-                        slidesPerView: 5.5,
-                        spaceBetween: 20,
-                    },
-                    1024: {
-                        slidesPerView: 6.5,
-                        spaceBetween: 25,
-                    },
-                }}
-                scrollbar={{
-                    hide: false,
-                }}
+                spaceBetween={15}
+                slidesPerView={"auto"}
+                scrollbar={{ hide: false }}
                 mousewheel={{
                     enabled: true,
                     sensitivity: 0.2,
                 }}
-                freeMode={{
-                    enabled: true,
-                }}
+                freeMode={{ enabled: true }}
                 grabCursor>
                 {renderContainers()}
                 {isCreatingContainerEnabled && (
-                    <SwiperSlide>
+                    <SwiperSlide style={{ width: 50 }}>
                         <CreateStatusButton />
                     </SwiperSlide>
                 )}