feat: scrolling of dnd during dragging, visible overlay for mobile

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -12,8 +12,7 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import Slider from "react-slick";
-import { Group } from "@mantine/core";
+import { Group, ScrollArea } from "@mantine/core";
 import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
 import useDndSensors from "@/app/deals/hooks/useSensors";
 import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
@@ -64,18 +63,6 @@ const FunnelDnd = <
     const sensors = useDndSensors();
     const isMobile = useIsMobile();
 
-    const settings = {
-        dots: true,
-        infinite: false,
-        speed: 500,
-        slidesToShow: 1.1,
-        slidesToScroll: 1,
-        draggable: !activeItem && !activeContainer,
-        swipe: !activeItem && !activeContainer,
-        arrows: false,
-        swipeToSlide: true,
-    };
-
     const renderContainers = () =>
         containers.map(container => {
             const containerItems = getItemsByContainer(container, items);
@@ -102,10 +89,18 @@ const FunnelDnd = <
     const renderBody = () => (
         <>
             {isMobile ? (
-                <Slider {...settings}>
-                    {renderContainers()}
-                    <CreateStatusButton />
-                </Slider>
+                <ScrollArea type={"never"}>
+                    <Group
+                        style={{
+                            gap: 0,
+                            display: "flex",
+                            flexWrap: "nowrap",
+                            alignItems: "start",
+                        }}>
+                        {renderContainers()}
+                        <CreateStatusButton />
+                    </Group>
+                </ScrollArea>
             ) : (
                 renderContainers()
             )}