feat: boards dnd editor for mobile

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -10,7 +10,7 @@ import React, {
 import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
 import { SortableContext } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
-import { Box, Group } from "@mantine/core";
+import { Box, Flex } from "@mantine/core";
 import useDndSensors from "@/app/deals/hooks/useSensors";
 import { SortableOverlay } from "@/components/dnd/SortableDnd/SortableOverlay";
 import SortableItem from "@/components/dnd/SortableItem";
@@ -25,9 +25,10 @@ type Props<T extends BaseItem> = {
     initialItems: T[];
     renderItem: (item: T) => ReactNode;
     onDragEnd: (itemId: number, newLexorank: string) => void;
-    onItemClick: (item: T) => void;
-    rowStyle?: CSSProperties;
+    onItemClick?: (item: T) => void;
+    containerStyle?: CSSProperties;
     itemStyle?: CSSProperties;
+    vertical?: boolean;
     disabled?: boolean;
 };
 
@@ -36,8 +37,9 @@ const SortableDnd = <T extends BaseItem>({
     renderItem,
     onDragEnd,
     onItemClick,
-    rowStyle,
+    containerStyle,
     itemStyle,
+    vertical,
     disabled = false,
 }: Props<T>) => {
     const [active, setActive] = useState<Active | null>(null);
@@ -100,14 +102,19 @@ const SortableDnd = <T extends BaseItem>({
             <SortableContext
                 items={items}
                 disabled={disabled}>
-                <Group
+                <Flex
                     gap={0}
-                    style={rowStyle}
+                    style={{
+                        flexWrap: "nowrap",
+                        flexDirection: vertical ? "column" : "row",
+                        ...containerStyle,
+                    }}
                     role="application">
                     {items.map((item, index) => (
                         <Box
                             key={index}
                             onClick={e => {
+                                if (!onItemClick) return;
                                 e.preventDefault();
                                 e.stopPropagation();
                                 onItemClick(item);
@@ -121,7 +128,7 @@ const SortableDnd = <T extends BaseItem>({
                             </SortableItem>
                         </Box>
                     ))}
-                </Group>
+                </Flex>
             </SortableContext>
             <SortableOverlay>
                 {activeItem ? renderItem(activeItem) : null}

src/components/layout/PageBlock/PageBlock.module.css

@@ -1,5 +1,4 @@
 .container {
-    border-radius: rem(40);
     background-color: white;
     @mixin dark {
         background-color: var(--mantine-color-dark-8);
@@ -8,7 +7,10 @@
     @mixin light {
         box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16);
     }
-    padding: rem(35);
+    @media (min-width: 48em) {
+        padding: rem(35);
+        border-radius: rem(40);
+    }
 }
 
 .container-full-height {