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/approval.js

@@ -361,7 +361,7 @@ function showTxApproval(details) {
     if (toAddr) {
         let toHtml = "";
         if (symbol) {
-            toHtml += `<div class="font-bold mb-1">${escapeHtml(symbol)}</div>`;
+            toHtml += `<div class="font-bold mb-1 break-words">${escapeHtml(symbol)}</div>`;
         }
         toHtml += approvalAddressHtml(toAddr, approvedTx.chainId);
         $("approve-tx-to").innerHTML = toHtml;
@@ -394,14 +394,14 @@ function showTxApproval(details) {
         $("approve-tx-action").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">`;
             detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
             if (d.address) {
                 if (d.isToken) {
-                    detailsHtml += `<div class="font-bold">${escapeHtml(tokenLabel(d.address, approvedTx.chainId) || "Unknown token")}</div>`;
+                    detailsHtml += `<div class="font-bold break-words">${escapeHtml(tokenLabel(d.address, approvedTx.chainId) || "Unknown token")}</div>`;
                     detailsHtml += blockscoutOffTokenNoteHtml(
                         d.address,
                         approvedTx.chainId,
@@ -412,7 +412,7 @@ function showTxApproval(details) {
                     approvedTx.chainId,
                 );
             } else {
-                detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+                detailsHtml += `<div class="font-bold break-words">${escapeHtml(d.value)}</div>`;
             }
             detailsHtml += `</div>`;
         }