fix variable input icon alignment

components/adv-post-form.js

@@ -269,7 +269,7 @@ export default function AdvPostForm ({ children, item, sub, storageKeyPrefix })
             emptyItem={EMPTY_FORWARD}
             hint={<span className='text-muted'>Forward sats to up to 5 other stackers. Any remaining sats go to you.</span>}
           >
-            {({ index, placeholder }) => {
+            {({ index, AppendColumn }) => {
               return (
                 <div key={index} className='d-flex flex-row'>
                   <InputUserSuggest
@@ -286,6 +286,7 @@ export default function AdvPostForm ({ children, item, sub, storageKeyPrefix })
                     max={100}
                     append={<InputGroup.Text className='text-monospace'>%</InputGroup.Text>}
                     groupClassName={`${styles.percent} mb-0`}
+                    AppendColumn={AppendColumn}
                   />
                 </div>
               )

components/form.js

@@ -609,7 +609,7 @@ function FormGroup ({ className, label, children }) {
 function InputInner ({
   prepend, append, hint, warn, showValid, onChange, onBlur, overrideValue, appendValue,
   innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce: debounceTime, maxLength, hideError,
-  ...props
+  AppendColumn, ...props
 }) {
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
   const formik = noForm ? null : useFormikContext()
@@ -687,6 +687,8 @@ function InputInner ({
 
   return (
     <>
+      <Row>
+        <Col>
           <InputGroup hasValidation className={inputGroupClassName}>
             {prepend}
             <BootstrapForm.Control
@@ -719,6 +721,9 @@ function InputInner ({
               {meta.touched && meta.error}
             </BootstrapForm.Control.Feedback>
           </InputGroup>
+        </Col>
+        {AppendColumn && <AppendColumn className={meta.touched && meta.error ? 'invisible' : ''} />}
+      </Row>
       {hint && (
         <BootstrapForm.Text>
           {hint}
@@ -952,22 +957,28 @@ export function VariableInput ({ label, groupClassName, name, hint, max, min, re
       <FieldArray name={name} hasValidation>
         {({ form, ...fieldArrayHelpers }) => {
           const options = form.values[name]
+
           return (
             <>
-              {options?.map((_, i) => (
+              {options?.map((_, i) => {
+                const AppendColumn = ({ className }) => (
+                  <Col className={`d-flex ps-0 ${className}`} xs='auto'>
+                    {options.length - 1 === i && options.length !== max
+                      // onMouseDown is used to prevent the blur event on text inputs from overriding the click event
+                      ? <AddIcon className='fill-grey align-self-center justify-self-center pointer' onMouseDown={() => fieldArrayHelpers.push(emptyItem)} />
+                      // filler div for col alignment across rows
+                      : <div style={{ width: '24px', height: '24px' }} />}
+                  </Col>
+                )
+                return (
                   <div key={i}>
                     <Row className='mb-2'>
                       <Col>
                         {children
-                        ? children({ index: i, readOnly: i < readOnlyLen, placeholder: i >= min ? 'optional' : undefined })
+                          ? children({ index: i, readOnly: i < readOnlyLen, placeholder: i >= min ? 'optional' : undefined, AppendColumn })
-                        : <InputInner name={`${name}[${i}]`} {...props} readOnly={i < readOnlyLen} placeholder={i >= min ? 'optional' : undefined} />}
+                          : <InputInner name={`${name}[${i}]`} {...props} readOnly={i < readOnlyLen} placeholder={i >= min ? 'optional' : undefined} AppendColumn={AppendColumn} />}
-                    </Col>
-                    <Col className='d-flex ps-0' xs='auto'>
-                      {options.length - 1 === i && options.length !== max
-                        ? <AddIcon className='fill-grey align-self-center justify-self-center pointer' onClick={() => fieldArrayHelpers.push(emptyItem)} />
-                        // filler div for col alignment across rows
-                        : <div style={{ width: '24px', height: '24px' }} />}
                       </Col>
+
                       {options.length - 1 === i &&
                         <>
                           {hint && <BootstrapForm.Text>{hint}</BootstrapForm.Text>}
@@ -976,7 +987,8 @@ export function VariableInput ({ label, groupClassName, name, hint, max, min, re
                         </>}
                     </Row>
                   </div>
-              ))}
+                )
+              })}
             </>
           )
         }}