fix(amount): wrap long dashboard amounts instead of clipping

[raul-oliveira]

Acceptance Criteria

• Long amounts on the dashboard wrap onto a second line instead of clipping or overflowing — in the balance block (Total / Available / Locked) and the transaction-history Value column
• Wrapped balance values hang-indent under the value, not the label
• Wrapped history values stay flush-right; the column never collapses, shrinks, or ellipsizes
• Short values and row spacing are unchanged from master

Fourth of 6 PRs. Stacked on #894 — base branch is raul-oliveira/feat/amount-format-radio, not master. Review #894 first.

What changed

Layout only — no formatting logic.

• WalletBalance.js: each balance row becomes a flex row (<div className="wallet-balance-row"> + a nowrap <strong> label + the existing <Amount>). The value is the flex item, so its continuation lines hang-indent under the value — the design's hanging indent, a free consequence of flex, no explicit indent.
• index.module.scss: new .wallet-balance* block; the existing #token-history .value rule gains min-width: 12rem; white-space: normal so the column wraps and never collapses. No fixed width — the Figma columns are content-hugged.

Left diverging from the mock on purpose (designer to confirm): history values keep the app's monospace 1.2rem and #28a745/#dc3545, where Figma shows 20px sans and #41A922/#A92224. The brief for this screen is wrapping only.

Possible follow-up (out of scope, pre-existing): the Token Import modal's balance column (.token-balance) uses white-space: nowrap, so a long compressed amount could clip there. Not on the dashboard, not touched here.

Testing

Suite unchanged from #894: the same 7 pre-existing suites fail on the Jest/axios ESM issue (see #892), 33 passed. No new strings.

Manual QA needed

• Dashboard Total / Available / Locked with a very large balance (~123,456,789,012,345,678.12345678): the value wraps to a second line that starts under the value, not the label.
• Narrow the window to ~900px: values still wrap, never clip / ellipsize / shrink.
• History Value column: long values wrap to two lines, both flush right; the column does not collapse.
• Short values and balance-row spacing are identical to master.

Security Checklist

• Make sure you do not include new dependencies in the project unless strictly necessary and do not include dev-dependencies as production ones. More dependencies increase the possibility of one of them being hijacked and affecting us.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 74ebcaf0-d183-4e59-aac9-f98943204d3e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch raul-oliveira/feat/amount-format-dashboard

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}