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

src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -4,6 +4,6 @@
     width: 15vw;
 
     @media (max-width: 48em) {
-        width: auto;
+        width: 90vw;
     }
 }

src/app/layout.tsx

@@ -1,7 +1,5 @@
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import { ReactNode } from "react";
 import {
     ColorSchemeScript,

src/components/dnd/FunnelDnd/FunnelDnd.module.css

@@ -0,0 +1,14 @@
+
+.overlay {
+    cursor: grabbing;
+    border-radius: 10px;
+
+    @media (max-width: 48em) {
+        @mixin dark {
+            box-shadow: 2px 2px 15px 1px var(--mantine-color-dark-6);
+        }
+        @mixin light {
+            box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
+        }
+    }
+}

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

src/components/dnd/FunnelDnd/FunnelOverlay.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { defaultDropAnimation, DragOverlay } from "@dnd-kit/core";
+import styles from "@/components/dnd/FunnelDnd/FunnelDnd.module.css";
 
 type Props<TContainer, TItem> = {
     activeContainer: TContainer | null;
@@ -16,7 +17,7 @@ const FunnelOverlay = <TContainer, TItem>({
 }: Props<TContainer, TItem>) => {
     return (
         <DragOverlay dropAnimation={defaultDropAnimation}>
-            <div style={{ cursor: "grabbing" }}>
+            <div className={styles.overlay}>
                 {activeItem
                     ? renderItem(activeItem)
                     : activeContainer