From c13aa69565a1027252a1bd187bd61d803e1a405f Mon Sep 17 00:00:00 2001
From: Kartik Labhshetwar <kartik.labhshetwar@gmail.com>
Date: Thu, 9 Oct 2025 13:48:19 +0530
Subject: [PATCH] fix: improve cross button alignment and spacing in
 FormBuilder Options (#24247)

* fix: improve cross button alignment and spacing in FormBuilder Options

* fix: revert eslint errors

---------

Co-authored-by: Devanshu Sharma <devanshusharma658@gmail.com>
---
 .../features/form-builder/FormBuilder.tsx     | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 08a7ae7d27..039dfe31e0 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -460,11 +460,11 @@ function Options({
     <div className={className}>
       <Label>{label}</Label>
       <div className="bg-muted rounded-md p-4" data-testid="options-container">
-        <ul ref={animationRef} className="flex flex-col gap-1">
+        <ul ref={animationRef} className="flex flex-col gap-3">
           {value?.map((option, index) => (
             <li key={index}>
               <div className="flex items-center gap-2">
-                <div className="flex-grow">
+                <div className="relative flex-grow">
                   <Input
                     required
                     value={option.label}
@@ -480,7 +480,23 @@ function Options({
                     }}
                     readOnly={readOnly}
                     placeholder={t("enter_option", { index: index + 1 })}
+                    className={value.length > 2 && !readOnly ? "pr-8" : ""}
                   />
+                  {value.length > 2 && !readOnly && (
+                    <Button
+                      type="button"
+                      className="absolute right-1 top-1/2 -translate-y-1/2 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>
                 {showPrice && (
                   <div className="w-24">
@@ -505,21 +521,6 @@ function Options({
                     />
                   </div>
                 )}
-                {value.length > 2 && !readOnly && (
-                  <Button
-                    type="button"
-                    className="-ml-8 mb-2 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>
           ))}
@@ -528,6 +529,7 @@ function Options({
           <Button
             color="minimal"
             data-testid="add-option"
+            className="mt-3"
             onClick={() => {
               const newOptions = [...(value || [])];
               newOptions.push({ label: "", value: "", price: 0 });