fix: mantine carousel

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

@@ -12,3 +12,22 @@
         }
     }
 }
+
+.indicator {
+    height: 4px;
+    @mixin light {
+        background-color: lightgray;
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+    }
+
+    &[data-active] {
+        @mixin light {
+            background-color: gray;
+        }
+        @mixin dark {
+            background-color: var(--mantine-color-dark-5);
+        }
+    }
+}

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -12,7 +12,8 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import { Group, ScrollArea } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { Group } from "@mantine/core";
 import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
 import useDndSensors from "@/app/deals/hooks/useSensors";
 import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
@@ -20,6 +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 styles from "./FunnelDnd.module.css";
 
 type Props<TContainer, TItem> = {
     containers: TContainer[];
@@ -89,18 +91,16 @@ const FunnelDnd = <
     const renderBody = () => (
         <>
             {isMobile ? (
-                <ScrollArea type={"never"}>
-                    <Group
-                        style={{
-                            gap: 0,
-                            display: "flex",
-                            flexWrap: "nowrap",
-                            alignItems: "start",
-                        }}>
-                        {renderContainers()}
-                        <CreateStatusButton />
-                    </Group>
-                </ScrollArea>
+                <Carousel
+                    slideSize={"80%"}
+                    slideGap={"md"}
+                    pb={"xl"}
+                    withControls={false}
+                    withIndicators
+                    classNames={styles}>
+                    {renderContainers()}
+                    <CreateStatusButton />
+                </Carousel>
             ) : (
                 renderContainers()
             )}