give balances more space in action modals

components/BorrowForm.tsx

@@ -205,14 +205,14 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
           <ArrowLeftIcon className={`h-6 w-6`} />
         </button>
         <h2 className="mb-4 text-center text-lg">{t('select-borrow-token')}</h2>
-        <div className="grid auto-cols-fr grid-flow-col  px-4 pb-2">
-          <div className="">
+        <div className="flex items-center px-4 pb-2">
+          <div className="w-1/4">
             <p className="text-xs">{t('token')}</p>
           </div>
-          <div className="text-right">
+          <div className="w-1/4 text-right">
             <p className="text-xs">{t('borrow-rate')}</p>
           </div>
-          <div className="text-right">
+          <div className="w-1/2 text-right">
             <p className="whitespace-nowrap text-xs">{t('max-borrow')}</p>
           </div>
         </div>

components/DepositForm.tsx

@@ -221,14 +221,14 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
         <h2 className="mb-4 text-center text-lg">
           {t('select-deposit-token')}
         </h2>
-        <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
-          <div className="text-left">
+        <div className="flex items-center px-4 pb-2">
+          <div className="w-1/4 text-left">
             <p className="text-xs">{t('token')}</p>
           </div>
-          <div className="text-right">
+          <div className="w-1/4 text-right">
             <p className="text-xs">{t('deposit-rate')}</p>
           </div>
-          <div className="text-right">
+          <div className="w-1/2 text-right">
             <p className="whitespace-nowrap text-xs">{t('wallet-balance')}</p>
           </div>
         </div>

components/RepayForm.tsx

@@ -194,11 +194,11 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
           <ArrowLeftIcon className={`h-6 w-6`} />
         </button>
         <h2 className="mb-4 text-center text-lg">{t('select-repay-token')}</h2>
-        <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
-          <div className="text-left">
+        <div className="flex items-center px-4 pb-2">
+          <div className="w-1/2 text-left">
             <p className="text-xs">{t('token')}</p>
           </div>
-          <div className="text-right">
+          <div className="w-1/2 text-right">
             <p className="whitespace-nowrap text-xs">{t('amount-owed')}</p>
           </div>
         </div>

components/WithdrawForm.tsx

@@ -183,11 +183,11 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
         <h2 className="mb-4 text-center text-lg">
           {t('select-withdraw-token')}
         </h2>
-        <div className="grid auto-cols-fr grid-flow-col  px-4 pb-2">
-          <div className="text-left">
+        <div className="flex items-center px-4 pb-2">
+          <div className="w-1/2 text-left">
             <p className="text-xs">{t('token')}</p>
           </div>
-          <div className="flex justify-end">
+          <div className="w-1/2 text-right">
             <p className="text-xs">{t('available-balance')}</p>
           </div>
         </div>

components/account/ActionTokenItem.tsx

@@ -30,11 +30,15 @@ const ActionTokenItem = ({
 
   return (
     <button
-      className="default-transition flex grid w-full auto-cols-fr grid-flow-col items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
+      className="default-transition flex w-full items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
       onClick={() => onSelect(name)}
       disabled={customValue <= 0}
     >
-      <div className="flex items-center">
+      <div
+        className={`flex ${
+          !showBorrowRates && !showDepositRates ? 'w-1/2' : 'w-1/4'
+        } items-center`}
+      >
         <div className="mr-2.5 flex flex-shrink-0 items-center">
           <Image
             alt=""
@@ -46,21 +50,23 @@ const ActionTokenItem = ({
         <p className="text-th-fgd-1">{name}</p>
       </div>
       {showDepositRates ? (
-        <div className="text-right font-mono">
+        <div className="w-1/4 text-right font-mono">
           <p className="text-th-up">
             {formatDecimal(bank.getDepositRate().toNumber(), 2)}%
           </p>
         </div>
       ) : null}
       {showBorrowRates ? (
-        <div className="text-right font-mono">
+        <div className="w-1/4 text-right font-mono">
           <p className="text-th-down">
             {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
           </p>
         </div>
       ) : null}
-      <div className="text-right">
-        <p className="font-mono text-th-fgd-1">{formatDecimal(customValue)}</p>
+      <div className="w-1/2 pl-3 text-right">
+        <p className="truncate font-mono text-th-fgd-1">
+          {formatDecimal(customValue)}
+        </p>
       </div>
     </button>
   )

components/modals/UserSetupModal.tsx

@@ -546,14 +546,14 @@ const UserSetupModal = ({
                     className="thin-scroll absolute top-36 w-full overflow-auto"
                     style={{ height: 'calc(100vh - 380px)' }}
                   >
-                    <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
-                      <div className="">
+                    <div className="flex items-center px-4 pb-2">
+                      <div className="w-1/4">
                         <p className="text-xs">{t('token')}</p>
                       </div>
-                      <div className="text-right">
+                      <div className="w-1/4 text-right">
                         <p className="text-xs">{t('deposit-rate')}</p>
                       </div>
-                      <div className="text-right">
+                      <div className="w-1/2 text-right">
                         <p className="whitespace-nowrap text-xs">
                           {t('wallet-balance')}
                         </p>

public/locales/en/common.json

@@ -25,7 +25,7 @@
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
   "borrow-funds": "Borrow Funds",
-  "borrow-rate": "Borrow Rate (APR)",
+  "borrow-rate": "Borrow APR",
   "buy": "Buy",
   "cancel": "Cancel",
   "chart-unavailable": "Chart Unavailable",
@@ -55,7 +55,7 @@
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
-  "deposit-rate": "Deposit Rate (APR)",
+  "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",

public/locales/es/common.json

@@ -25,7 +25,7 @@
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
   "borrow-funds": "Borrow Funds",
-  "borrow-rate": "Borrow Rate (APR)",
+  "borrow-rate": "Borrow APR",
   "buy": "Buy",
   "cancel": "Cancel",
   "chart-unavailable": "Chart Unavailable",
@@ -55,7 +55,7 @@
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
-  "deposit-rate": "Deposit Rate (APR)",
+  "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",

public/locales/ru/common.json

@@ -25,7 +25,7 @@
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
   "borrow-funds": "Borrow Funds",
-  "borrow-rate": "Borrow Rate (APR)",
+  "borrow-rate": "Borrow APR",
   "buy": "Buy",
   "cancel": "Cancel",
   "chart-unavailable": "Chart Unavailable",
@@ -55,7 +55,7 @@
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
-  "deposit-rate": "Deposit Rate (APR)",
+  "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",

public/locales/zh/common.json

@@ -25,7 +25,7 @@
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
   "borrow-funds": "Borrow Funds",
-  "borrow-rate": "Borrow Rate (APR)",
+  "borrow-rate": "Borrow APR",
   "buy": "Buy",
   "cancel": "Cancel",
   "chart-unavailable": "Chart Unavailable",
@@ -55,7 +55,7 @@
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
-  "deposit-rate": "Deposit Rate (APR)",
+  "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",

public/locales/zh_tw/common.json

@@ -25,7 +25,7 @@
   "borrow-amount": "Borrow Amount",
   "borrow-fee": "Borrow Fee",
   "borrow-funds": "Borrow Funds",
-  "borrow-rate": "Borrow Rate (APR)",
+  "borrow-rate": "Borrow APR",
   "buy": "Buy",
   "cancel": "Cancel",
   "chart-unavailable": "Chart Unavailable",
@@ -55,7 +55,7 @@
   "deposit": "Deposit",
   "deposit-amount": "Deposit Amount",
   "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
-  "deposit-rate": "Deposit Rate (APR)",
+  "deposit-rate": "Deposit APR",
   "disconnect": "Disconnect",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",