Merge pull request #2318 from oasisprotocol/lw/min-right-align

Minimally right-align balances

Author: lukaw3d

.changelog/2318.trivial.md

@@ -0,0 +1 @@
+Minimally right-align balances

src/app/components/Account/ConsensusAccountDetailsView.tsx

@@ -50,6 +50,16 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
     ? `${RouteUtils.getValidatorRoute(account.network, account.entity)}#${transactionsContainerId}`
     : `${RouteUtils.getAccountRoute(account, account.address)}#${transactionsContainerId}`
 
+  // Workaround to right-align all balance numbers
+  const longestBalanceWidth = (
+    <div className="invisible [&>*]:block [&>*]:h-0">
+      <RoundedBalance value={account.total} ticker={account.ticker} />
+      <RoundedBalance value={account.available} ticker={account.ticker} />
+      <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
+      <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
+    </div>
+  )
+
   return (
     <StyledDescriptionList
       className="grid-cols-[160px_auto] sm:grid-cols-[200px_auto]"
@@ -78,25 +88,29 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
       )}
       <dt>{t('account.totalBalance')}</dt>
       <dd>
-        <div className="w-full max-w-[25ex] text-right">
+        <div className="text-right">
+          {longestBalanceWidth}
           <RoundedBalance value={account.total} ticker={account.ticker} />
         </div>
       </dd>
       <StyledListTitle>{t('account.available')}</StyledListTitle>
       <dd>
-        <div className="w-full max-w-[25ex] text-right">
+        <div className="text-right">
+          {longestBalanceWidth}
           <RoundedBalance value={account.available} ticker={account.ticker} />
         </div>
       </dd>
       <StyledListTitle>{t('common.staked')}</StyledListTitle>
       <dd>
-        <div className="w-full max-w-[25ex] text-right">
+        <div className="text-right">
+          {longestBalanceWidth}
           <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
         </div>
       </dd>
       <StyledListTitle>{t('account.debonding')}</StyledListTitle>
       <dd>
-        <div className="w-full max-w-[25ex] text-right">
+        <div className="text-right">
+          {longestBalanceWidth}
           <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
         </div>
       </dd>

src/app/components/RoundedBalance/index.tsx

@@ -76,12 +76,14 @@ export const RoundedBalance: FC<RoundedBalanceProps> = ({
 
   if (number.isEqualTo(roundedNumber)) {
     return (
-      <Trans
-        t={t}
-        i18nKey="common.valueInTokenWithLink"
-        values={preciseValueFormat}
-        components={{ TickerLink: tickerLink }}
-      />
+      <span>
+        <Trans
+          t={t}
+          i18nKey="common.valueInTokenWithLink"
+          values={preciseValueFormat}
+          components={{ TickerLink: tickerLink }}
+        />
+      </span>
     )
   }
 

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -146,6 +146,16 @@ export const ValidatorDetailsView: FC<{
   if (isLoading) return <TextSkeleton numberOfRows={10} />
   if (!validator) return null
 
+  // Workaround to right-align all balance numbers
+  const longestBalanceWidth = account && (
+    <div className="invisible [&>*]:block [&>*]:h-0">
+      <RoundedBalance value={account.total} ticker={account.ticker} />
+      <RoundedBalance value={account.available} ticker={account.ticker} />
+      <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
+      <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
+    </div>
+  )
+
   return (
     <StyledDescriptionList
       className="grid-cols-[160px_auto] sm:grid-cols-[200px_auto]"
@@ -179,25 +189,29 @@ export const ValidatorDetailsView: FC<{
           {account && (
             <>
               <dd>
-                <div className="w-full max-w-[25ex] text-right">
+                <div className="text-right">
+                  {longestBalanceWidth}
                   <RoundedBalance value={account.total} ticker={account.ticker} />
                 </div>
               </dd>
               <StyledListTitle>{t('account.available')}</StyledListTitle>
               <dd>
-                <div className="w-full max-w-[25ex] text-right">
+                <div className="text-right">
+                  {longestBalanceWidth}
                   <RoundedBalance value={account.available} ticker={account.ticker} />
                 </div>
               </dd>
               <StyledListTitle>{t('common.staked')}</StyledListTitle>
               <dd>
-                <div className="w-full max-w-[25ex] text-right">
+                <div className="text-right">
+                  {longestBalanceWidth}
                   <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
                 </div>
               </dd>
               <StyledListTitle>{t('account.debonding')}</StyledListTitle>
               <dd>
-                <div className="w-full max-w-[25ex] text-right">
+                <div className="text-right">
+                  {longestBalanceWidth}
                   <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
                 </div>
               </dd>