From dd9b8a7f7d46793ec66e6f709a32c728162d5102 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Wed, 15 Feb 2023 13:15:41 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Delete=20button=20drags=20field?=
 =?UTF-8?q?=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/field.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index 04e76c408..47feda6bc 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -48,6 +48,7 @@ export default function Field(props: FieldPropsType) {
       onDrag={onControlledDrag}
       onStop={onDragStop}
       defaultPosition={{ x: 0, y: 0 }}
+      cancel="strong"
     >
       <div
         ref={nodeRef}
@@ -55,7 +56,13 @@ export default function Field(props: FieldPropsType) {
         className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0"
       >
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
+          {/* todo icons */}
+          {field.type}
+          <div className="text-xs text-center">{props.field.recipient}</div>
+        </div>
+        <strong>
           <IconButton
+            className="absolute top-0 right-0"
             icon={TrashIcon}
             onClick={(event: any) => {
               if (confirm("Delete field?")) {
@@ -63,10 +70,7 @@ export default function Field(props: FieldPropsType) {
               }
             }}
           ></IconButton>
-          {/* todo icons */}
-          {field.type}
-          <div className="text-xs text-center">{props.field.recipient}</div>
-        </div>
+        </strong>
       </div>
     </Draggable>
   );