From 0cfbf7159eb3968b93098e43302d2c1029b357a3 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Wed, 11 Oct 2023 00:45:26 +0530
Subject: [PATCH] fix position and add transition (#11799)

---
 packages/features/form-builder/FormBuilder.tsx      | 4 ++--
 packages/ui/components/arrow-button/ArrowButton.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 44119ef52a..3bbc3be8a8 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -69,7 +69,7 @@ export const FormBuilder = function FormBuilder({
   // I would have liked to give Form Builder it's own Form but nested Forms aren't something that browsers support.
   // So, this would reuse the same Form as the parent form.
   const fieldsForm = useFormContext<RhfForm>();
-
+  const [parent] = useAutoAnimate<HTMLUListElement>();
   const { t } = useLocale();
 
   const { fields, swap, remove, update, append } = useFieldArray({
@@ -112,7 +112,7 @@ export const FormBuilder = function FormBuilder({
           {LockedIcon}
         </div>
         <p className="text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px]">{description}</p>
-        <ul className="border-subtle divide-subtle mt-2 divide-y rounded-md border">
+        <ul ref={parent} className="border-subtle divide-subtle mt-2 divide-y rounded-md border">
           {fields.map((field, index) => {
             const options = field.options
               ? field.options
diff --git a/packages/ui/components/arrow-button/ArrowButton.tsx b/packages/ui/components/arrow-button/ArrowButton.tsx
index 0abe2a8cfd..f123eab05d 100644
--- a/packages/ui/components/arrow-button/ArrowButton.tsx
+++ b/packages/ui/components/arrow-button/ArrowButton.tsx
@@ -10,13 +10,13 @@ export function ArrowButton(props: ArrowButtonProps) {
     <>
       {props.arrowDirection === "up" ? (
         <button
-          className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
+          className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[12px]"
           onClick={props.onClick}>
           <ArrowUp className="h-5 w-5" />
         </button>
       ) : (
         <button
-          className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] -ml-4 mt-8 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
+          className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] -ml-4 mt-8 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[12px]"
           onClick={props.onClick}>
           <ArrowDown className="h-5 w-5" />
         </button>