fix(amount): wrap read-only amount labels instead of overflowing

[raul-oliveira]

Acceptance Criteria

• The read-only amount labels on Create Deposit Token, Create Fee Token, Create NFT and Send Tokens wrap within their card instead of overflowing when the amount is long
• The editable amount input is unchanged
• Short amounts render identically to master

Sixth and final PR. Stacked on #896 — base branch is raul-oliveira/feat/amount-format-tx-overview, not master. Review #896 first.

What changed

Layout only. A shared .amount-label class (overflow-wrap: anywhere; white-space: normal; max-width: 100%) is added to the read-only amount labels:

• Create Token / Create Fee Token: the deposit / fee / available-balance info line.
• Create NFT: the available / deposit / fee / total rows.
• Send Tokens: the available-balance readout, the network-fee value, the "Amount to be sent" total, and the "You'll pay" line.
• Token Mint: the deposit label. It is rendered by the shared TokenAction component (also used by Delegate / Destroy), so TokenAction gains an opt-in depositClassName prop passed only from TokenMint; Delegate and Destroy render className={undefined} (no attribute) and are unaffected.

InputNumber (the editable input) is deliberately untouched — it already accepts unlimited decimals via BigInt accumulation with the caret pinned to the end. Token Melt has no persistent read-only deposit label (only a toast and an error line that already wrap), so it needed no change.

Testing

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

Manual QA needed

• Create Deposit Token: type an amount long enough that the deposit label exceeds the card width — it wraps within the card, does not overflow / clip / widen the card. The input itself scrolls horizontally as before, caret pinned to the end.
• Create Fee Token: same for the network-fee label.
• Create NFT: available / deposit / total all wrap.
• Send Tokens: the fee row, available balance, "Amount to be sent" and "You'll pay" all wrap; the token select stays usable.
• Token Mint: the deposit label wraps.
• Narrow the window to ~900px and repeat — nothing clips.
• Short amounts render identically 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: 18d8447b-1560-4e83-ad93-4e65fb056bf4

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-labels

---

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