fix(amount): wrap long amounts in the transaction overview modal

[raul-oliveira]

Acceptance Criteria

• Long amounts in the transaction-overview modal wrap instead of clipping — the per-output amounts, the "You will pay" total, and the network-fee value
• The direction arrow stays with the final wrapped line
• The modal never widens past its dialog and never shows a horizontal scrollbar for long values
• Short amounts render identically to master

Fifth of 6 PRs. Stacked on #895 — base branch is raul-oliveira/feat/amount-format-dashboard, not master. Review #895 first.

What changed

Wrapping only — no formatting change, no font-size change, no headline element, no structural change to the modal. (The brief's "adapt the font size like mobile" targeted a headline amount the desktop modal doesn't have; the settled decision is wrapping-only.)

• Per-output amount span: dropped whiteSpace:'nowrap', added overflowWrap:'anywhere' + minWidth:0; the direction arrow is pinned to the last line with alignSelf:'flex-end'.
• "You will pay" total: the value wraps (overflowWrap:'anywhere', minWidth:0, lineHeight:20px, right-aligned) and the label gets flexShrink:0, so the value is what wraps rather than widening the row.
• Network-fee value: overflowWrap:'anywhere' + minWidth:0, label flexShrink:0. The "No fee" pill is untouched.

Testing

Suite unchanged from #895: the same 7 pre-existing suites fail on the Jest/axios ESM issue (see #892), 33 passed. This component has no render test (the Jest env can't mount it); it is covered by the manual QA below.

Manual QA needed

• Trigger the modal from Send Tokens with an amount near 123,456,789,012,345,678.12345678: the per-output amount wraps and the direction arrow stays on the final line.
• "You will pay" wraps across lines, right-aligned, and does not widen the modal.
• Multiple tokens plus a fee: the joined total ("… AAA + … HTR") wraps sensibly, and the network-fee value wraps too.
• The modal does not grow wider than its modal-dialog; no horizontal scrollbar appears.
• Short amounts, the PIN field, Cancel and Confirm are unaffected.

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: 36b8d73d-735a-4f4b-9330-787d8e9fec60

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-tx-overview

---

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.}