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 {