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

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>
                 )}