From 8e2b9fd2cedca9cc04410ddecc57495646972602 Mon Sep 17 00:00:00 2001
From: raul-oliveira <mrraul65@gmail.com>
Date: Thu, 23 Jul 2026 11:29:16 -0300
Subject: [PATCH] fix(amount): wrap long dashboard amounts instead of clipping

The balance rows and the transaction-history Value column forced amounts
onto a single line, clipping long values. Make each balance row a flex
row so a wrapped value hangs under itself (the hanging indent from the
design), and let the history Value column wrap with a min-width floor so
it never collapses or ellipsizes.

Layout only -- no formatting change. History value font and colour are
intentionally left diverging from the mock; see the PR description.
---
 src/components/WalletBalance.js | 15 ++++++++++++---
 src/index.module.scss           | 28 ++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/WalletBalance.js b/src/components/WalletBalance.js
index 1d6e5b5b..25b98ef5 100644
--- a/src/components/WalletBalance.js
+++ b/src/components/WalletBalance.js
@@ -44,9 +44,18 @@ class WalletBalance extends React.Component {
     const renderBalance = () => {
       return (
         <div>
-          <p><strong>{t`Total:`}</strong> <Amount value={balance.available + balance.locked} symbol={symbol} isNFT={isNFT} /></p>
-          <p><strong>{t`Available:`}</strong> <Amount value={balance.available} symbol={symbol} isNFT={isNFT} /></p>
-          <p><strong>{t`Locked:`}</strong> <Amount value={balance.locked} symbol={symbol} isNFT={isNFT} /></p>
+          <div className="wallet-balance-row">
+            <strong className="wallet-balance-label">{t`Total:`}</strong>
+            <Amount value={balance.available + balance.locked} symbol={symbol} isNFT={isNFT} />
+          </div>
+          <div className="wallet-balance-row">
+            <strong className="wallet-balance-label">{t`Available:`}</strong>
+            <Amount value={balance.available} symbol={symbol} isNFT={isNFT} />
+          </div>
+          <div className="wallet-balance-row">
+            <strong className="wallet-balance-label">{t`Locked:`}</strong>
+            <Amount value={balance.locked} symbol={symbol} isNFT={isNFT} />
+          </div>
         </div>
       );
     }
diff --git a/src/index.module.scss b/src/index.module.scss
index 2f0ab59e..e7eda2b6 100644
--- a/src/index.module.scss
+++ b/src/index.module.scss
@@ -266,6 +266,11 @@ i.pointer {
 	text-align: right;
 	font-family: monospace;
 	font-size: 1.2rem;
+	// Long amounts wrap onto a second line, right-aligned, and are never
+	// shrunk or ellipsized. min-width stops the column collapsing so far that
+	// the value breaks earlier than it needs to.
+	min-width: 12rem;
+	white-space: normal;
 }
 
 #token-history .voided-element {
@@ -1384,6 +1389,29 @@ div .nc-token-balance:not(:last-child) {
   white-space: normal;
 }
 
+/* Dashboard balance rows */
+.wallet-balance {
+  &-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    // Bootstrap's paragraph spacing used to provide this; the rows are divs now.
+    margin-bottom: 1rem;
+
+    // The value is the flex item, so its wrapped continuation lines align under
+    // the value's first character rather than under the label. This is the
+    // hanging indent from the design — it needs no explicit indent.
+    .amount {
+      min-width: 0;
+    }
+  }
+
+  &-label {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+}
+
 /* Amount format modal */
 .amount-format {
   &-modal .modal-dialog {