add small ux fixes from alpha feedback

components/Input.tsx

@@ -41,14 +41,16 @@ const Input = ({
           type={type}
           value={value}
           onChange={onChange}
-          className={`bg-transparent font-light tracking-wider w-full focus:outline-none ${
-            disabled && 'opacity-20 cursor-not-allowed'
-          } ${type === 'number' ? 'text-right' : ''}`}
+          className={`bg-transparent font-light tracking-wider w-full h-full focus:outline-none ${
+            disabled ? 'opacity-20 cursor-not-allowed' : ''
+          } ${type === 'number' ? 'text-right' : ''} ${
+            value.toString().length > 9 ? 'text-xs' : ''
+          }`}
           disabled={disabled}
           {...props}
         />
         {suffix ? (
-          <span className="text-xs px-2 bg-transparent text-th-fgd-4">
+          <span className="text-xs pl-0.5 pr-1 bg-transparent text-th-fgd-4">
             {suffix}
           </span>
         ) : null}

components/Orderbook.tsx

@@ -96,12 +96,16 @@ export default function Orderbook({ depth = 7 }) {
   }, [orderbook])
 
   const handlePriceClick = (price) => {
+    console.log('price click')
+
     setMangoStore((state) => {
       state.tradeForm.price = price
     })
   }
 
   const handleSizeClick = (size) => {
+    console.log('size click')
+
     setMangoStore((state) => {
       state.tradeForm.baseSize = size
     })
@@ -169,11 +173,7 @@ const OrderbookRow = React.memo<any>(
         : price
 
     return (
-      <div
-        className={`flex mb-0.5 justify-between`}
-        ref={element}
-        onClick={onSizeClick}
-      >
+      <div className={`flex mb-0.5 justify-between`} ref={element}>
         {invert ? (
           <>
             <div className={`text-left`}>
@@ -185,11 +185,16 @@ const OrderbookRow = React.memo<any>(
               />
               <div onClick={onPriceClick}>{formattedPrice}</div>
             </div>
-            <div className={`text-right`}>{formattedSize}</div>
+            <div className={`text-right`} onClick={onSizeClick}>
+              {formattedSize}
+            </div>
           </>
         ) : (
           <>
-            <div className={`text-left flex-1 text-th-fgd-1`}>
+            <div
+              className={`text-left flex-1 text-th-fgd-1`}
+              onClick={onSizeClick}
+            >
               {formattedSize}
             </div>
             <div className={`text-right relative flex-1`}>

components/TopBar.tsx

@@ -146,7 +146,9 @@ const TopBar = () => {
                       <div className="flex flex-row items-center px-2 justify-center h-full rounded-l hover:bg-th-primary hover:text-th-fgd-1">
                         <WalletIcon className="w-5 h-5 mr-3 fill-current" />
                         <div>
-                          Connect Wallet
+                          <span className="whitespace-nowrap">
+                            Connect Wallet
+                          </span>
                           <StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
                             {WALLET_PROVIDERS.filter(
                               (p) => p.url === savedProviderUrl

components/TradeForm.tsx

@@ -80,9 +80,13 @@ export default function TradeForm() {
     market?.minOrderSize && getDecimalCount(market.minOrderSize)
   // const priceDecimalCount = market?.tickSize && getDecimalCount(market.tickSize)
 
-  useEffect(() => {
-    onSetBaseSize(baseSize)
-  }, [price, baseSize])
+  const onSetPrice = (price: number | '') => {
+    setPrice(price)
+    if (!price) return
+    if (baseSize) {
+      onSetBaseSize(baseSize)
+    }
+  }
 
   const onSetBaseSize = (baseSize: number | '') => {
     setBaseSize(baseSize)
@@ -106,12 +110,12 @@ export default function TradeForm() {
       setBaseSize('')
       return
     }
-    const usePrice = Number(price) || markPrice
 
-    if (!usePrice) {
+    if (!Number(price) && tradeType === 'Limit') {
       setBaseSize('')
       return
     }
+    const usePrice = Number(price) || markPrice
     const rawBaseSize = quoteSize / usePrice
     const baseSize = quoteSize && roundToDecimal(rawBaseSize, sizeDecimalCount)
     setBaseSize(baseSize)
@@ -242,7 +246,7 @@ export default function TradeForm() {
           <Input
             type="number"
             step={market?.tickSize || 1}
-            onChange={(e) => setPrice(parseFloat(e.target.value))}
+            onChange={(e) => onSetPrice(parseFloat(e.target.value))}
             value={price}
             disabled={tradeType === 'Market'}
             prefix={'Price'}

hooks/useMarket.tsx

@@ -33,7 +33,7 @@ const useMarket = () => {
         TOKEN_MINTS.find((token) =>
           token.address.equals(market.baseMintAddress)
         )?.name) ||
-      'UNKNOWN',
+      '...',
     [market, TOKEN_MINTS]
   )
 
@@ -43,7 +43,7 @@ const useMarket = () => {
         TOKEN_MINTS.find((token) =>
           token.address.equals(market.quoteMintAddress)
         )?.name) ||
-      'UNKNOWN',
+      '...',
     [market, TOKEN_MINTS]
   )