feat: layouts and styles for desktop and mobile

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}