fix: species/length filter input and buttons layout

Fixes #246
agrc · Nov 20, 2024 · ec5eb10 · ec5eb10
1 parent 9ae055a
commit ec5eb10
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/components/filters/SpeciesLength.tsx b/src/components/filters/SpeciesLength.tsx
@@ -30,6 +30,9 @@ function RowControls({ species, min, max, onChange, addRow, removeRow, isLast }:
     );
   }
 
+  const iconClasses = 'w-5 text-zinc-700 dark:text-zinc-50';
+  const buttonClasses = 'p-0';
+
   return (
     <>
       <div className="flex w-full items-end gap-1">
@@ -52,27 +55,27 @@ function RowControls({ species, min, max, onChange, addRow, removeRow, isLast }:
         )}
         <TextField
           label="Min"
-          className="min-w-0 flex-grow"
+          className="min-w-0 flex-1"
           value={min}
           type="number"
           isInvalid={(min.length && !isPositiveWholeNumber(min)) || isInvalidRange}
           onChange={(newValue: string) => onChange({ species, min: newValue, max })}
         />
         <TextField
           label="Max"
-          className="min-w-0 flex-grow"
+          className="min-w-0 flex-1"
           value={max}
           type="number"
           isInvalid={(max.length && !isPositiveWholeNumber(max)) || isInvalidRange}
           onChange={(newValue: string) => onChange({ species, min, max: newValue })}
         />
         {isLast ? (
-          <Button aria-label="add new filter" variant="icon" className="w-16" onPress={addRow}>
-            <PlusCircleIcon />
+          <Button aria-label="add new filter" variant="icon" onPress={addRow} className={buttonClasses}>
+            <PlusCircleIcon className={iconClasses} />
           </Button>
         ) : (
-          <Button aria-label="remove this filter" variant="icon" className="w-16" onPress={removeRow}>
-            <MinusCircleIcon />
+          <Button aria-label="remove this filter" variant="icon" onPress={removeRow} className={buttonClasses}>
+            <MinusCircleIcon className={iconClasses} />
           </Button>
         )}
       </div>