fix: fixed columns draggables and styles

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -2,7 +2,7 @@
 
 import React, { ReactNode, RefObject } from "react";
 import {
-    closestCorners,
+    closestCenter,
     DndContext,
     DragEndEvent,
     DragOverEvent,
@@ -30,7 +30,12 @@ type Props<TContainer, TItem> = {
     onDragOver: (event: DragOverEvent) => void;
     onDragEnd: (event: DragEndEvent) => void;
     swiperRef: RefObject<SwiperRef | null>;
-    renderContainer: (container: TContainer, children: ReactNode) => ReactNode;
+    renderContainer: (
+        container: TContainer,
+        children: ReactNode,
+        renderDraggable: () => ReactNode
+    ) => ReactNode;
+    renderContainerHeader: (container: TContainer) => ReactNode;
     renderContainerOverlay: (
         container: TContainer,
         children: ReactNode
@@ -56,6 +61,7 @@ const FunnelDnd = <
     onDragEnd,
     swiperRef,
     renderContainer,
+    renderContainerHeader,
     renderContainerOverlay,
     renderItem,
     renderItemOverlay,
@@ -81,16 +87,18 @@ const FunnelDnd = <
                         key={containerId}
                         id={containerId}
                         disabled={disabledColumns}
-                        renderItem={() =>
+                        renderItem={renderDraggable =>
                             renderContainer(
                                 container,
                                 <FunnelColumn
                                     id={containerId}
                                     items={containerItems}
                                     renderItem={renderItem}
-                                />
+                                />,
+                                renderDraggable!
                             )
                         }
+                        renderDraggable={() => renderContainerHeader(container)}
                     />
                 </SwiperSlide>
             );
@@ -142,7 +150,7 @@ const FunnelDnd = <
     return (
         <DndContext
             sensors={sensors}
-            collisionDetection={closestCorners}
+            collisionDetection={closestCenter}
             onDragStart={onDragStart}
             onDragOver={onDragOver}
             onDragEnd={onDragEnd}>

src/components/dnd/SortableDnd/SortableDnd.module.css

@@ -0,0 +1,9 @@
+.swiper-container :global(.swiper-scrollbar-drag) {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-9);
+    }
+    @mixin light {
+        background-color: grey;
+    }
+}
+

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -18,6 +18,7 @@ import useDndSensors from "@/app/deals/hooks/useSensors";
 import { SortableOverlay } from "@/components/dnd/SortableDnd/SortableOverlay";
 import SortableItem from "@/components/dnd/SortableItem";
 import { getNewLexorank, sortByLexorank } from "@/utils/lexorank";
+import classes from "./SortableDnd.module.css";
 
 type BaseItem = {
     id: number;
@@ -112,6 +113,7 @@ const SortableDnd = <T extends BaseItem>({
                 enabled: true,
                 sensitivity: 0.2,
             }}
+            className={classes["swiper-container"]}
             style={containerStyle}
             direction={vertical ? "vertical" : "horizontal"}
             freeMode={{ enabled: true }}