fixed: x button overlap (#9198)

packages/features/form-builder/FormBuilder.tsx

@@ -185,33 +185,12 @@ export const FormBuilder = function FormBuilder({
         },
       ]);
     }
+
+    const crossButton = (index: number) => {
       return (
-      <div className={className}>
-        <Label>{label}</Label>
-        <div className="bg-muted rounded-md p-4">
-          <ul ref={animationRef}>
-            {value?.map((option, index) => (
-              <li key={index}>
-                <div className="flex items-center">
-                  <Input
-                    required
-                    value={option.label}
-                    onChange={(e) => {
-                      // Right now we use label of the option as the value of the option. It allows us to not separately lookup the optionId to know the optionValue
-                      // It has the same drawback that if the label is changed, the value of the option will change. It is not a big deal for now.
-                      value.splice(index, 1, {
-                        label: e.target.value,
-                        value: e.target.value.trim(),
-                      });
-                      onChange(value);
-                    }}
-                    readOnly={readOnly}
-                    placeholder={`Enter Option ${index + 1}`}
-                  />
-                  {value.length > 2 && !readOnly && (
         <Button
           type="button"
-                      className="mb-2 -ml-8 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
+          className="ml-3 p-0 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
           size="sm"
           color="minimal"
           StartIcon={X}
@@ -224,7 +203,34 @@ export const FormBuilder = function FormBuilder({
             onChange(newOptions);
           }}
         />
-                  )}
+      );
+    };
+
+    return (
+      <div className={className}>
+        <Label>{label}</Label>
+        <div className="bg-muted rounded-md p-4">
+          <ul ref={animationRef}>
+            {value?.map((option, index) => (
+              <li key={index}>
+                <div className="flex items-center">
+                  <InputField
+                    required
+                    value={option.label}
+                    onChange={(e) => {
+                      // Right now we use label of the option as the value of the option. It allows us to not separately lookup the optionId to know the optionValue
+                      // It has the same drawback that if the label is changed, the value of the option will change. It is not a big deal for now.
+                      value.splice(index, 1, {
+                        label: e.target.value,
+                        value: e.target.value.trim(),
+                      });
+                      onChange(value);
+                    }}
+                    addOnSuffix={value.length > 2 && !readOnly && crossButton(index)}
+                    readOnly={readOnly}
+                    placeholder={`Enter Option ${index + 1}`}
+                    containerClassName="w-full"
+                  />
                 </div>
               </li>
             ))}