feat: disable dnds for mobile

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -28,6 +28,7 @@ type Props<T extends BaseItem> = {
     onItemClick: (item: T) => void;
     rowStyle?: CSSProperties;
     itemStyle?: CSSProperties;
+    disabled?: boolean;
 };
 
 const SortableDnd = <T extends BaseItem>({
@@ -37,6 +38,7 @@ const SortableDnd = <T extends BaseItem>({
     onItemClick,
     rowStyle,
     itemStyle,
+    disabled = false,
 }: Props<T>) => {
     const [active, setActive] = useState<Active | null>(null);
     const [items, setItems] = useState<T[]>([]);
@@ -95,7 +97,9 @@ const SortableDnd = <T extends BaseItem>({
             onDragStart={({ active }) => setActive(active)}
             onDragEnd={onDragEndLocal}
             onDragCancel={() => setActive(null)}>
-            <SortableContext items={items}>
+            <SortableContext
+                items={items}
+                disabled={disabled}>
                 <Group
                     gap={0}
                     style={rowStyle}
@@ -111,7 +115,8 @@ const SortableDnd = <T extends BaseItem>({
                             <SortableItem
                                 dragHandleStyle={{ cursor: "pointer" }}
                                 itemStyle={itemStyle}
-                                id={item.id}>
+                                id={item.id}
+                                disabled={disabled}>
                                 {renderItem(item)}
                             </SortableItem>
                         </Box>