From ae46d615ef02983606d7e56660ff205b4cbe5f1f Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 20 Sep 2022 17:07:46 +0530
Subject: [PATCH] fix: positioning of arrows (#4478)

Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/ui/v2/core/form/FormCard.tsx | 39 +++++++++++++++------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/ui/v2/core/form/FormCard.tsx b/packages/ui/v2/core/form/FormCard.tsx
index 630e695ea3..3dcb774cc1 100644
--- a/packages/ui/v2/core/form/FormCard.tsx
+++ b/packages/ui/v2/core/form/FormCard.tsx
@@ -20,7 +20,10 @@ export default function FormCard({
   moveDown?: Action | null;
   className?: string;
 } & JSX.IntrinsicElements["div"]) {
-  className = classNames(className, "group relative w-full rounded-md p-4 border border-gray-200");
+  className = classNames(
+    className,
+    "flex items-center group relative w-full rounded-md p-4 border border-gray-200"
+  );
 
   return (
     <div className={className} {...restProps}>
@@ -28,7 +31,7 @@ export default function FormCard({
         {moveUp?.check() ? (
           <button
             type="button"
-            className="invisible absolute left-0 -ml-[13px] mb-4 flex h-6 w-6 scale-0 items-center justify-center rounded-md border   bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black  hover:shadow group-hover:visible group-hover:scale-100 "
+            className="invisible absolute left-0 -ml-[13px] -mt-10 flex h-6 w-6 scale-0 items-center justify-center rounded-md border   bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black  hover:shadow group-hover:visible group-hover:scale-100 "
             onClick={() => moveUp?.fn()}>
             <Icon.FiArrowUp />
           </button>
@@ -36,27 +39,29 @@ export default function FormCard({
         {moveDown?.check() ? (
           <button
             type="button"
-            className="invisible absolute left-0 -ml-[13px] mt-8 flex h-6 w-6  scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100"
+            className="invisible absolute left-0 -ml-[13px] -mt-2 flex h-6 w-6  scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100"
             onClick={() => moveDown?.fn()}>
             <Icon.FiArrowDown />
           </button>
         ) : null}
       </div>
-      <div className="flex items-center justify-between">
-        <span className="text-sm font-semibold leading-none">{label}</span>
-        {deleteField?.check() ? (
-          <button
-            type="button"
-            onClick={() => {
-              deleteField?.fn();
-            }}
-            color="secondary">
-            <Icon.FiTrash className="h-4 w-4 text-gray-400" />
-          </button>
-        ) : null}
+      <div className="w-full">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-semibold leading-none">{label}</span>
+          {deleteField?.check() ? (
+            <button
+              type="button"
+              onClick={() => {
+                deleteField?.fn();
+              }}
+              color="secondary">
+              <Icon.FiTrash className="h-4 w-4 text-gray-400" />
+            </button>
+          ) : null}
+        </div>
+        <Divider className="mt-3 mb-6" />
+        {children}
       </div>
-      <Divider className="mt-3 mb-6" />
-      {children}
     </div>
   );
 }