auto growing inputs

components/FormAmount/Inputs/InputAmount.module.css

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

components/FormAmount/Inputs/InputAmount.tsx

@@ -1,4 +1,6 @@
-import { Dispatch, SetStateAction } from 'react'
+'use client'
+
+import { Dispatch, SetStateAction, useRef, useState } from 'react'
 import styles from './InputAmount.module.css'
 
 export function InputAmount({
@@ -8,6 +10,16 @@ export function InputAmount({
   amount: number
   setAmount: Dispatch<SetStateAction<number>>
 }) {
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const { value } = e.target
+
+    if (value === '') {
+      setAmount(0)
+    } else {
+      setAmount(Number(value))
+    }
+  }
+
   return (
     <input
       className={styles.input}
@@ -15,7 +27,10 @@ export function InputAmount({
       inputMode="numeric"
       pattern="[0-9]*"
       value={amount}
-      onChange={(e) => setAmount(Number(e.target.value))}
+      onChange={handleChange}
+      style={{
+        width: Math.min(Math.max(amount.toString().length, 2), 50) + 'ch'
+      }}
     />
   )
 }

components/FormAmount/Inputs/InputToken.module.css

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