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

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>

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>

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}

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%;
+}

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>

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 = {