feat: boards dnd editor for mobile

src/app/deals/components/Board/Board.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { CSSProperties, FC, useState } from "react";
 import { Box, Group, Text } from "@mantine/core";
 import BoardMenu from "@/app/deals/components/Board/BoardMenu";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
@@ -7,9 +7,10 @@ import { BoardSchema } from "@/lib/client";
 
 type Props = {
     board: BoardSchema;
+    containerStyle?: CSSProperties;
 };
 
-const Board: FC<Props> = ({ board }) => {
+const Board: FC<Props> = ({ board, containerStyle }) => {
     const [isHovered, setIsHovered] = useState(false);
     const { onUpdateBoard } = useBoardsContext();
 
@@ -20,7 +21,7 @@ const Board: FC<Props> = ({ board }) => {
             py={"xs"}
             justify={"space-between"}
             wrap={"nowrap"}
-            style={{ borderWidth: 1 }}
+            style={{ ...containerStyle, borderWidth: 1 }}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}>
             <InPlaceInput

src/app/deals/components/Board/BoardMenu.tsx

@@ -6,12 +6,13 @@ import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { BoardSchema } from "@/lib/client";
 
 type Props = {
-    isHovered: boolean;
     board: BoardSchema;
     startEditing: () => void;
+    isHovered?: boolean;
+    menuIconSize?: number;
 };
 
-const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
+const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true, menuIconSize = 16 }) => {
     const { selectedBoard, onDeleteBoard } = useBoardsContext();
 
     return (
@@ -28,7 +29,7 @@ const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
                         cursor: "pointer",
                     }}
                     onClick={e => e.stopPropagation()}>
-                    <IconDotsVertical size={16} />
+                    <IconDotsVertical size={menuIconSize} />
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>

src/app/deals/components/DealContainer/DealContainer.tsx

@@ -17,9 +17,9 @@ const DealContainer: FC<Props> = ({ deal, disabled = false }) => {
             <SortableItem
                 disabled={disabled}
                 dragHandleStyle={{ cursor: "pointer" }}
-                id={deal.id}>
-                {dealBody}
-            </SortableItem>
+                id={deal.id}
+                renderItem={() => dealBody}
+            />
         </Box>
     );
 };