feat: layouts and styles for desktop and mobile

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -68,11 +68,12 @@ const FunnelDnd = <
         dots: true,
         infinite: false,
         speed: 500,
-        slidesToShow: 1,
+        slidesToShow: 1.1,
         slidesToScroll: 1,
         draggable: !activeItem && !activeContainer,
         swipe: !activeItem && !activeContainer,
         arrows: false,
+        swipeToSlide: true,
     };
 
     const renderContainers = () =>
@@ -145,7 +146,7 @@ const FunnelDnd = <
                     renderBody()
                 ) : (
                     <Group
-                        gap="xs"
+                        gap={0}
                         wrap="nowrap"
                         align="start">
                         {renderBody()}

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -8,6 +8,7 @@ import React, {
     useState,
 } from "react";
 import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { SortableContext } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
 import { Box, Flex } from "@mantine/core";
@@ -100,6 +101,7 @@ const SortableDnd = <T extends BaseItem>({
 
     return (
         <DndContext
+            modifiers={[restrictToHorizontalAxis]}
             sensors={sensors}
             onDragStart={({ active }) => setActive(active)}
             onDragEnd={onDragEndLocal}