Skip to content

Commit aa67213

Browse files
lukaw3dlukaw3d
authored
Merge pull request #2318 from oasisprotocol/lw/min-right-align
Minimally right-align balances
2 parents 03770c9 + 346816f commit aa67213

4 files changed

Lines changed: 45 additions & 14 deletions

File tree

‎.changelog/2318.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Minimally right-align balances

‎src/app/components/Account/ConsensusAccountDetailsView.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,16 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
5050
? `${RouteUtils.getValidatorRoute(account.network, account.entity)}#${transactionsContainerId}`
5151
: `${RouteUtils.getAccountRoute(account, account.address)}#${transactionsContainerId}`
5252

53+
// Workaround to right-align all balance numbers
54+
const longestBalanceWidth = (
55+
<div className="invisible [&>*]:block [&>*]:h-0">
56+
<RoundedBalance value={account.total} ticker={account.ticker} />
57+
<RoundedBalance value={account.available} ticker={account.ticker} />
58+
<RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
59+
<RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
60+
</div>
61+
)
62+
5363
return (
5464
<StyledDescriptionList
5565
className="grid-cols-[160px_auto] sm:grid-cols-[200px_auto]"
@@ -78,25 +88,29 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
7888
)}
7989
<dt>{t('account.totalBalance')}</dt>
8090
<dd>
81-
<div className="w-full max-w-[25ex] text-right">
91+
<div className="text-right">
92+
{longestBalanceWidth}
8293
<RoundedBalance value={account.total} ticker={account.ticker} />
8394
</div>
8495
</dd>
8596
<StyledListTitle>{t('account.available')}</StyledListTitle>
8697
<dd>
87-
<div className="w-full max-w-[25ex] text-right">
98+
<div className="text-right">
99+
{longestBalanceWidth}
88100
<RoundedBalance value={account.available} ticker={account.ticker} />
89101
</div>
90102
</dd>
91103
<StyledListTitle>{t('common.staked')}</StyledListTitle>
92104
<dd>
93-
<div className="w-full max-w-[25ex] text-right">
105+
<div className="text-right">
106+
{longestBalanceWidth}
94107
<RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
95108
</div>
96109
</dd>
97110
<StyledListTitle>{t('account.debonding')}</StyledListTitle>
98111
<dd>
99-
<div className="w-full max-w-[25ex] text-right">
112+
<div className="text-right">
113+
{longestBalanceWidth}
100114
<RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
101115
</div>
102116
</dd>

‎src/app/components/RoundedBalance/index.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,14 @@ export const RoundedBalance: FC<RoundedBalanceProps> = ({
7676

7777
if (number.isEqualTo(roundedNumber)) {
7878
return (
79-
<Trans
80-
t={t}
81-
i18nKey="common.valueInTokenWithLink"
82-
values={preciseValueFormat}
83-
components={{ TickerLink: tickerLink }}
84-
/>
79+
<span>
80+
<Trans
81+
t={t}
82+
i18nKey="common.valueInTokenWithLink"
83+
values={preciseValueFormat}
84+
components={{ TickerLink: tickerLink }}
85+
/>
86+
</span>
8587
)
8688
}
8789

‎src/app/pages/ValidatorDetailsPage/index.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,16 @@ export const ValidatorDetailsView: FC<{
146146
if (isLoading) return <TextSkeleton numberOfRows={10} />
147147
if (!validator) return null
148148

149+
// Workaround to right-align all balance numbers
150+
const longestBalanceWidth = account && (
151+
<div className="invisible [&>*]:block [&>*]:h-0">
152+
<RoundedBalance value={account.total} ticker={account.ticker} />
153+
<RoundedBalance value={account.available} ticker={account.ticker} />
154+
<RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
155+
<RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
156+
</div>
157+
)
158+
149159
return (
150160
<StyledDescriptionList
151161
className="grid-cols-[160px_auto] sm:grid-cols-[200px_auto]"
@@ -179,25 +189,29 @@ export const ValidatorDetailsView: FC<{
179189
{account && (
180190
<>
181191
<dd>
182-
<div className="w-full max-w-[25ex] text-right">
192+
<div className="text-right">
193+
{longestBalanceWidth}
183194
<RoundedBalance value={account.total} ticker={account.ticker} />
184195
</div>
185196
</dd>
186197
<StyledListTitle>{t('account.available')}</StyledListTitle>
187198
<dd>
188-
<div className="w-full max-w-[25ex] text-right">
199+
<div className="text-right">
200+
{longestBalanceWidth}
189201
<RoundedBalance value={account.available} ticker={account.ticker} />
190202
</div>
191203
</dd>
192204
<StyledListTitle>{t('common.staked')}</StyledListTitle>
193205
<dd>
194-
<div className="w-full max-w-[25ex] text-right">
206+
<div className="text-right">
207+
{longestBalanceWidth}
195208
<RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
196209
</div>
197210
</dd>
198211
<StyledListTitle>{t('account.debonding')}</StyledListTitle>
199212
<dd>
200-
<div className="w-full max-w-[25ex] text-right">
213+
<div className="text-right">
214+
{longestBalanceWidth}
201215
<RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
202216
</div>
203217
</dd>

0 commit comments

Comments
 (0)