From 810b7a40d7b2d772ea29e4a042fa08b867c80cad Mon Sep 17 00:00:00 2001
From: raul-oliveira <mrraul65@gmail.com>
Date: Thu, 23 Jul 2026 12:07:46 -0300
Subject: [PATCH] fix(amount): wrap read-only amount labels instead of
 overflowing

The deposit, fee, available-balance and summary labels on Create Token,
Create Fee Token, Create NFT and Send Tokens forced long amounts onto a
single line, overflowing their cards. Add a shared `.amount-label` class
(overflow-wrap: anywhere) to those read-only labels so they wrap inside
the container.

The editable amount input is untouched -- it already accepts unlimited
decimals with the caret pinned to the end. The Mint deposit label is
rendered by the shared TokenAction component, so it gains an opt-in
`depositClassName` prop passed only from TokenMint, leaving Delegate and
Destroy unaffected.
---
 src/components/SendTokensOne.js      |  8 ++++----
 src/components/tokens/TokenAction.js |  2 +-
 src/components/tokens/TokenMint.js   |  1 +
 src/index.module.scss                | 10 ++++++++++
 src/screens/CreateNFT.js             |  8 ++++----
 src/screens/CreateToken.js           |  2 +-
 6 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/SendTokensOne.js b/src/components/SendTokensOne.js
index daca5f8bf..daa5d857a 100644
--- a/src/components/SendTokensOne.js
+++ b/src/components/SendTokensOne.js
@@ -514,7 +514,7 @@ class SendTokensOne extends React.Component {
       });
 
       return (
-        <span className="ml-3">
+        <span className="ml-3 amount-label">
           (
             {t`Balance available: `}
             { tokenBalance.status === TOKEN_DOWNLOAD_STATUS.LOADING && (
@@ -588,21 +588,21 @@ class SendTokensOne extends React.Component {
                   </div>
                 )}
               </span>
-              <span style={{ fontSize: '12px', color: '#404040' }}>
+              <span className="amount-label" style={{ fontSize: '12px', color: '#404040' }}>
                 {this.renderFeeValue()}
               </span>
             </div>
 
             <div className="d-flex justify-content-between align-items-center mb-2">
               <span style={{ fontWeight: 600, fontSize: '14px' }}>{t`Amount to be sent`}</span>
-              <span style={{ fontSize: '12px', color: '#404040' }}>
+              <span className="amount-label" style={{ fontSize: '12px', color: '#404040' }}>
                 {this.getTotalOutputAmount()} {this.state.selected.symbol}
               </span>
             </div>
 
             {!this.state.isDepositToken && this.state.fee > 0n && (
               <div className="d-flex justify-content-end">
-                <span style={{ fontSize: '12px', color: '#8e8e93' }}>
+                <span className="amount-label" style={{ fontSize: '12px', color: '#8e8e93' }}>
                   <strong>{t`You'll pay:`}</strong>
                   {` ${this.getTotalOutputAmount()} ${this.state.selected.symbol} + ${formatAmount(this.state.fee, { decimalPlaces: this.props.decimalPlaces, amountFormat: this.props.amountFormat })} HTR`}
                 </span>
diff --git a/src/components/tokens/TokenAction.js b/src/components/tokens/TokenAction.js
index 8eb975bd6..07bb7c208 100644
--- a/src/components/tokens/TokenAction.js
+++ b/src/components/tokens/TokenAction.js
@@ -164,7 +164,7 @@ class TokenAction extends React.Component {
       <div key={this.props.action}>
         <h2>{this.props.title}</h2>
         <p>{this.props.subtitle}</p>
-        <p>{this.props.deposit}</p>
+        <p className={this.props.depositClassName}>{this.props.deposit}</p>
         <form className={`mt-4 mb-3 ${this.state.formValidated ? 'was-validated' : ''}`} ref={this.form} onSubmit={(e) => e.preventDefault()}>
           {this.props.renderForm()}
         </form>
diff --git a/src/components/tokens/TokenMint.js b/src/components/tokens/TokenMint.js
index 1556fa01b..828d9cba3 100644
--- a/src/components/tokens/TokenMint.js
+++ b/src/components/tokens/TokenMint.js
@@ -219,6 +219,7 @@ class TokenMint extends React.Component {
        title={t`Mint tokens`}
        subtitle={`A deposit of ${depositPercent * 100}% in ${nativeTokenConfig.symbol} of the mint amount is required`}
        deposit={`Deposit: ${tokens.getDepositAmount(getAmountToCalculateDeposit(), depositPercent, this.props.decimalPlaces, this.props.amountFormat)} ${nativeTokenConfig.symbol} (${formatAmount(this.props.htrBalance, { decimalPlaces: this.props.decimalPlaces, amountFormat: this.props.amountFormat })} ${nativeTokenConfig.symbol} available)`}
+       depositClassName="amount-label"
        buttonName={t`Go`}
        validateForm={this.mint}
        getSuccessMessage={this.getSuccessMessage}
diff --git a/src/index.module.scss b/src/index.module.scss
index e7eda2b6f..643098c1c 100644
--- a/src/index.module.scss
+++ b/src/index.module.scss
@@ -1458,3 +1458,13 @@ div .nc-token-balance:not(:last-child) {
     }
   }
 }
+
+/* Read-only amount labels beside inputs (deposit, fee, available balance) */
+.amount-label {
+  // The label embeds amounts inside a sentence, so the break can land at a
+  // space normally; `anywhere` is the fallback for a single very long number
+  // that exceeds the container on its own.
+  overflow-wrap: anywhere;
+  white-space: normal;
+  max-width: 100%;
+}
diff --git a/src/screens/CreateNFT.js b/src/screens/CreateNFT.js
index 039162a62..eed1d7d41 100644
--- a/src/screens/CreateNFT.js
+++ b/src/screens/CreateNFT.js
@@ -350,10 +350,10 @@ function CreateNFT() {
           </div>
         </div>
         <hr className="mb-5 mt-5"/>
-        <p><strong>{nativeTokenConfig.symbol} available:</strong> <Amount value={htrBalance} symbol={nativeTokenConfig.symbol} /></p>
-        <p><strong>Deposit:</strong> <Amount value={depositAmount} symbol={nativeTokenConfig.symbol} /></p>
-        <p><strong>Fee:</strong> {nftFee} {nativeTokenConfig.symbol}</p>
-        <p><strong>Total:</strong> <Amount value={tokensUtils.getNFTFee() + depositAmount} symbol={nativeTokenConfig.symbol} /></p>
+        <p className="amount-label"><strong>{nativeTokenConfig.symbol} available:</strong> <Amount value={htrBalance} symbol={nativeTokenConfig.symbol} /></p>
+        <p className="amount-label"><strong>Deposit:</strong> <Amount value={depositAmount} symbol={nativeTokenConfig.symbol} /></p>
+        <p className="amount-label"><strong>Fee:</strong> {nftFee} {nativeTokenConfig.symbol}</p>
+        <p className="amount-label"><strong>Total:</strong> <Amount value={tokensUtils.getNFTFee() + depositAmount} symbol={nativeTokenConfig.symbol} /></p>
         <button type="button" className="mt-3 btn btn-hathor" onClick={onClickCreate}>Create</button>
       </form>
       <p className="text-danger mt-3">{errorMessage}</p>
diff --git a/src/screens/CreateToken.js b/src/screens/CreateToken.js
index ae778f545..0040ee374 100644
--- a/src/screens/CreateToken.js
+++ b/src/screens/CreateToken.js
@@ -334,7 +334,7 @@ function CreateToken() {
     if (isDepositToken) {
       infoLabel = `${t`Deposit:`} ${tokens.getDepositAmount(amount, depositPercent, decimalPlaces, amountFormat)} ${nativeTokenConfig.symbol} (${availableBalanceText})`;
     }
-    return <p className="mb-0">{infoLabel}</p>;
+    return <p className="mb-0 amount-label">{infoLabel}</p>;
   }
 
   const formContainerStyle = {