From 35144e6f4773abe38726a65be43016c16ec958bb Mon Sep 17 00:00:00 2001
From: VasuDevrani <101383635+VasuDevrani@users.noreply.github.com>
Date: Tue, 30 May 2023 19:43:17 +0530
Subject: [PATCH] fixed: x button overlap (#9198)

---
 .../features/form-builder/FormBuilder.tsx     | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 5328e935f2..b5c3b18ad3 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -185,6 +185,27 @@ export const FormBuilder = function FormBuilder({
         },
       ]);
     }
+
+    const crossButton = (index: number) => {
+      return (
+        <Button
+          type="button"
+          className="ml-3 p-0 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
+          size="sm"
+          color="minimal"
+          StartIcon={X}
+          onClick={() => {
+            if (!value) {
+              return;
+            }
+            const newOptions = [...value];
+            newOptions.splice(index, 1);
+            onChange(newOptions);
+          }}
+        />
+      );
+    };
+
     return (
       <div className={className}>
         <Label>{label}</Label>
@@ -193,7 +214,7 @@ export const FormBuilder = function FormBuilder({
             {value?.map((option, index) => (
               <li key={index}>
                 <div className="flex items-center">
-                  <Input
+                  <InputField
                     required
                     value={option.label}
                     onChange={(e) => {
@@ -205,26 +226,11 @@ export const FormBuilder = function FormBuilder({
                       });
                       onChange(value);
                     }}
+                    addOnSuffix={value.length > 2 && !readOnly && crossButton(index)}
                     readOnly={readOnly}
                     placeholder={`Enter Option ${index + 1}`}
+                    containerClassName="w-full"
                   />
-                  {value.length > 2 && !readOnly && (
-                    <Button
-                      type="button"
-                      className="mb-2 -ml-8 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
-                      size="sm"
-                      color="minimal"
-                      StartIcon={X}
-                      onClick={() => {
-                        if (!value) {
-                          return;
-                        }
-                        const newOptions = [...value];
-                        newOptions.splice(index, 1);
-                        onChange(newOptions);
-                      }}
-                    />
-                  )}
                 </div>
               </li>
             ))}