fix: long symbols wrap on TxApproval and TransactionDetail, and SuccessTx keeps its amount and recipient (closes #743)

TxApproval and TransactionDetail cut off a long symbol, amount or description at
the edge of the screen. These lines now wrap.

SuccessTx hid its Amount and To lines whenever it had a decoded action, even one
that showed neither. Each line is now hidden only when a readable decoded line
shows the same thing. A swap with no Amount line now shows its amount on
SuccessTx, as WaitTx and ErrorTx do.

Model: opus-5-5

src/popup/views/transactionDetail.js

@@ -126,13 +126,16 @@ function render() {
     const exactStr = tx.exactValue
         ? tx.exactValue + " " + detailSym
         : tx.directionLabel + " " + detailSym;
-    $("tx-detail-value").innerHTML = copyableHtml(exactStr, "font-bold");
+    $("tx-detail-value").innerHTML = copyableHtml(
+        exactStr,
+        "font-bold break-words",
+    );
 
     // Native quantity (raw integer, copyable)
     const nativeEl = $("tx-detail-native");
     if (tx.rawAmount && tx.rawUnit) {
         const nativeStr = tx.rawAmount + " " + tx.rawUnit;
-        nativeEl.innerHTML = copyableHtml(nativeStr, "");
+        nativeEl.innerHTML = copyableHtml(nativeStr, "break-words");
         nativeEl.parentElement.classList.remove("hidden");
     } else {
         nativeEl.innerHTML = "";
@@ -368,7 +371,7 @@ async function loadFullTxDetails(txHash, chainId) {
             actionEl.textContent = decoded.name;
             let detailsHtml = "";
             if (decoded.description) {
-                detailsHtml += `<div class="mb-2">${escapeHtml(decoded.description)}</div>`;
+                detailsHtml += `<div class="mb-2 break-words">${escapeHtml(decoded.description)}</div>`;
             }
             for (const d of decoded.details || []) {
                 detailsHtml += `<div class="mb-2">`;
@@ -377,13 +380,13 @@ async function loadFullTxDetails(txHash, chainId) {
                     // Token entry: show symbol on its own line, then address via shared renderer
                     const tokenSymbol = d.value.match(/^(\S+)\s*\(/)?.[1];
                     if (tokenSymbol) {
-                        detailsHtml += `<div class="font-bold">${escapeHtml(displaySymbol(tokenSymbol))}</div>`;
+                        detailsHtml += `<div class="font-bold break-words">${escapeHtml(displaySymbol(tokenSymbol))}</div>`;
                     }
                     detailsHtml += renderAddressHtml(d.address, { chainId });
                 } else if (d.address) {
                     detailsHtml += renderAddressHtml(d.address, { chainId });
                 } else {
-                    detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+                    detailsHtml += `<div class="font-bold break-words">${escapeHtml(d.value)}</div>`;
                 }
                 detailsHtml += `</div>`;
             }