auto-growing token select

* closes #6

components/Input/Input.module.css

@@ -1,6 +1,6 @@
 .input {
   all: unset;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem;
   text-align: center;
   border-right: 1px solid rgba(var(--foreground-rgb), 0.15);
 }

components/Select/Select.module.css

@@ -5,7 +5,7 @@
 .select {
   display: inline-block;
   all: unset;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem;
 }
 
 .select:hover:not(.select[disabled]) {

features/strategies/components/FormAmount.tsx

@@ -46,9 +46,7 @@ export function FormAmount({
         pattern="[0-9]*"
         value={amount}
         onChange={handleAmountChange}
-        style={{
+        style={{ width: amount.toString().length + 'ch' }}
-          width: Math.min(Math.max(amount.toString().length, 2), 50) + 'ch'
-        }}
       />
 
       <Select
@@ -56,7 +54,15 @@ export function FormAmount({
         value={token}
         onChange={handleTokenChange}
         disabled={!setToken}
-        style={setToken ? { paddingRight: '1.25rem' } : {}}
+        style={
+          setToken
+            ? {
+                paddingRight: '1.2rem',
+                width: `calc(${token.length + 'em'} - 1.75rem)`,
+                minWidth: '1.85rem'
+              }
+            : undefined
+        }
       />
     </FormInline>
   )

features/strategies/components/FormMarket.tsx

@@ -2,6 +2,11 @@ import { Dispatch, SetStateAction } from 'react'
 import { Select, FormInline } from '@/components'
 import { type Market } from '@/features/strategies'
 
+const options = [
+  { value: 'market', label: 'All Markets' },
+  { value: 'uniswap-v3', label: 'Uniswap v3' }
+]
+
 export function FormMarket({
   market,
   setMarket
@@ -9,17 +14,13 @@ export function FormMarket({
   market: Market
   setMarket: Dispatch<SetStateAction<Market>>
 }) {
-  const options = [
-    { value: 'market', label: 'All Markets' },
-    { value: 'uniswap-v3', label: 'Uniswap v3' }
-  ]
   return (
     <FormInline>
       <Select
         options={options}
         value={market}
         onChange={(e) => setMarket(e.target.value as Market)}
-        style={{ paddingRight: '1.25rem' }}
+        style={{ paddingRight: '1.2rem' }}
       />
     </FormInline>
   )