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

package.json

@@ -34,10 +34,8 @@
     "react-dom": "19.1.0",
     "react-imask": "^7.6.1",
     "react-redux": "^9.2.0",
-    "react-slick": "^0.31.0",
     "redux-persist": "^6.0.0",
     "sharp": "^0.34.3",
-    "slick-carousel": "^1.8.1",
     "zod": "^4.0.14"
   },
   "devDependencies": {

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, ScrollArea } from "@mantine/core";
-import { Group } 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}>
+                <ScrollArea type={"never"}>
-                    {renderContainers()}
+                    <Group
-                    <CreateStatusButton />
+                        style={{
-                </Slider>
+                            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

yarn.lock

@@ -5778,7 +5778,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.5, classnames@npm:^2.5.1":
+"classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
@@ -6156,10 +6156,8 @@ __metadata:
     react-dom: "npm:19.1.0"
     react-imask: "npm:^7.6.1"
     react-redux: "npm:^9.2.0"
-    react-slick: "npm:^0.31.0"
     redux-persist: "npm:^6.0.0"
     sharp: "npm:^0.34.3"
-    slick-carousel: "npm:^1.8.1"
     storybook: "npm:^8.6.8"
     storybook-dark-mode: "npm:^4.0.2"
     stylelint: "npm:^16.20.0"
@@ -9643,15 +9641,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json2mq@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "json2mq@npm:0.2.0"
-  dependencies:
-    string-convert: "npm:^0.2.0"
-  checksum: 10c0/fc9e2f2306572522d3e61d246afdf70b56ca9ea32f4ad5924c30949867851ab59c926bd0ffc821ebb54d32f3e82e95225f3906eacdb3e54c1ad49acdadf7e0c7
-  languageName: node
-  linkType: hard
-
 "json5@npm:^2.1.2, json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
@@ -11746,21 +11735,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-slick@npm:^0.31.0":
-  version: 0.31.0
-  resolution: "react-slick@npm:0.31.0"
-  dependencies:
-    classnames: "npm:^2.2.5"
-    json2mq: "npm:^0.2.0"
-    lodash.debounce: "npm:^4.0.8"
-    resize-observer-polyfill: "npm:^1.5.0"
-  peerDependencies:
-    react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/ac006104323c61af6d8e208edb49038485458756b72c9e15622beef2700085bcdb1d21f028be1b3f199ff15616eab9d61a45aa09650c9ae1d72bf2a23be48616
-  languageName: node
-  linkType: hard
-
 "react-style-singleton@npm:^2.2.2, react-style-singleton@npm:^2.2.3":
   version: 2.2.3
   resolution: "react-style-singleton@npm:2.2.3"
@@ -12050,13 +12024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resize-observer-polyfill@npm:^1.5.0":
-  version: 1.5.1
-  resolution: "resize-observer-polyfill@npm:1.5.1"
-  checksum: 10c0/5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
-  languageName: node
-  linkType: hard
-
 "resolve-cwd@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-cwd@npm:3.0.0"
@@ -12680,15 +12647,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slick-carousel@npm:^1.8.1":
-  version: 1.8.1
-  resolution: "slick-carousel@npm:1.8.1"
-  peerDependencies:
-    jquery: ">=1.8.0"
-  checksum: 10c0/e8c9c9a454c107cfee88689477b453449ed66d5343cf495d3135ec25ea736a0df862f625a9cdc8abd6262629ecef3343c5de686694831f99b13dfe837a1aa587
-  languageName: node
-  linkType: hard
-
 "smart-buffer@npm:^4.2.0":
   version: 4.2.0
   resolution: "smart-buffer@npm:4.2.0"
@@ -12870,13 +12828,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-convert@npm:^0.2.0":
-  version: 0.2.1
-  resolution: "string-convert@npm:0.2.1"
-  checksum: 10c0/00673ed8a3106137395436537ace7d3672c91a3290da73466055daa0134331dc84bc58c54ba2d2ea40711adc5744426d3c8239dbfc30290438fa3e9ff65db528
-  languageName: node
-  linkType: hard
-
 "string-length@npm:^4.0.2":
   version: 4.0.2
   resolution: "string-length@npm:4.0.2"