fix: fixed scroll color and width of columns slides on desktop

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

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

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={{
+                spaceBetween={15}
-                    650: {
+                slidesPerView={"auto"}
-                        slidesPerView: 4,
+                scrollbar={{ hide: false }}
-                        spaceBetween: 15,
-                    },
-                    850: {
-                        slidesPerView: 5.5,
-                        spaceBetween: 20,
-                    },
-                    1024: {
-                        slidesPerView: 6.5,
-                        spaceBetween: 25,
-                    },
-                }}
-                scrollbar={{
-                    hide: false,
-                }}
                 mousewheel={{
                     enabled: true,
                     sensitivity: 0.2,
                 }}
-                freeMode={{
+                freeMode={{ enabled: true }}
-                    enabled: true,
-                }}
                 grabCursor>
                 {renderContainers()}
                 {isCreatingContainerEnabled && (
-                    <SwiperSlide>
+                    <SwiperSlide style={{ width: 50 }}>
                         <CreateStatusButton />
                     </SwiperSlide>
                 )}