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

tests/approvalTokenNetwork.test.js

@@ -24,6 +24,8 @@ globalThis.chrome = {
     storage: { local: { get: async () => ({}), set: async () => {} } },
 };
 
+const fs = require("fs");
+const path = require("path");
 const { Interface } = require("ethers");
 const { state } = require("../src/shared/state");
 const { NETWORKS } = require("../src/shared/networks");
@@ -193,13 +195,13 @@ describe("a token tracked on Sepolia only", () => {
     test("is named on the Contract line and the decoded Token line, with its amount at its scale", async () => {
         await showTokenTransfer();
         expect(node("approve-tx-to").innerHTML).toContain(
-            '<div class="font-bold mb-1">TDOL</div>',
+            '<div class="font-bold mb-1 break-words">TDOL</div>',
         );
         expect(decodedLine("Token")).toContain(
-            '<div class="font-bold">TDOL</div>',
+            '<div class="font-bold break-words">TDOL</div>',
         );
         expect(decodedLine("Amount")).toContain(
-            '<div class="font-bold">1234.5000 TDOL</div>',
+            '<div class="font-bold break-words">1234.5000 TDOL</div>',
         );
     });
 
@@ -220,13 +222,51 @@ test("a token tracked and held on mainnet only is not named, and its amount is i
     ]);
     expect(node("approve-tx-to").innerHTML).not.toContain("MDOL");
     expect(decodedLine("Token")).toContain(
-        '<div class="font-bold">Unknown token</div>',
+        '<div class="font-bold break-words">Unknown token</div>',
     );
     expect(decodedLine("Amount")).toContain(
-        '<div class="font-bold">1234500000 base units (decimals unknown)</div>',
+        '<div class="font-bold break-words">1234500000 base units (decimals unknown)</div>',
     );
 });
 
+// Nothing limits the length of a token's symbol. Without the break-words class
+// a long one runs past the right edge of the screen and is cut off.
+describe("a long token symbol", () => {
+    const LONG = "L".repeat(60);
+
+    test("wraps on every decoded line and on the Contract line", async () => {
+        state.networkTrackedTokens = {
+            sepolia: [{ address: TOKEN, symbol: LONG, decimals: 6 }],
+        };
+        await showTokenTransfer();
+        expect(node("approve-tx-to").innerHTML).toContain(
+            `<div class="font-bold mb-1 break-words">${LONG}</div>`,
+        );
+        expect(node("approve-tx-decoded-details").innerHTML).toContain(
+            `<div class="mb-2 break-words">Transfer ${LONG}</div>`,
+        );
+        expect(decodedLine("Token")).toContain(
+            `<div class="font-bold break-words">${LONG}</div>`,
+        );
+        expect(decodedLine("Amount")).toContain(
+            `<div class="font-bold break-words">1234.5000 ${LONG}</div>`,
+        );
+    });
+
+    test("wraps on the Action line, and a long amount wraps on the Value line", () => {
+        const html = fs.readFileSync(
+            path.join(__dirname, "..", "src", "popup", "index.html"),
+            "utf8",
+        );
+        expect(html).toMatch(
+            /id="approve-tx-action"\s+class="text-xs font-bold mb-2 break-words"/,
+        );
+        expect(html).toMatch(
+            /id="approve-tx-value"\s+class="text-xs font-bold break-words"/,
+        );
+    });
+});
+
 // The From and Contract lines, and the decoded Token and Recipient lines.
 test("every address links to the Sepolia explorer", async () => {
     await showTokenTransfer();