fix: a saved SuccessTx in another shape reopens as itself, and long amounts wrap (closes #740)

The popup refused a saved SuccessTx whose decoded record was in a shape it
did not expect, and showed Home. SuccessTx already shows only the lines it
can read, so the popup no longer checks the record first.

A long amount or token symbol was cut off at the edge of the screen. These
now wrap:

- the Amount figure
- each decoded amount
- the token symbol
- the name and description of SuccessTx's decoded action

WaitTx and ErrorTx share the line that shows the symbol, so they gain this
too.

Model: opus-5-5

tests/txStatus.test.js

@@ -636,7 +636,7 @@ describe("SuccessTx and ErrorTx for a Sepolia transaction with mainnet active",
     test("SuccessTx's decoded action names the token from the tokens tracked on Sepolia", async () => {
         function expectTokenNamed() {
             expect(getElement("success-tx-decoded").innerHTML).toContain(
-                '<div class="font-bold">TDOL</div>',
+                '<div class="font-bold break-words">TDOL</div>',
             );
         }
         state.networkTrackedTokens = {
@@ -810,7 +810,7 @@ describe("the Permit2 allowance lines of a swap on WaitTx and ErrorTx", () => {
         expect(html.indexOf("Unlimited")).toBeLessThan(
             html.indexOf("Allowance token"),
         );
-        expect(html).toContain('<div class="font-bold">USDC</div>');
+        expect(html).toContain('<div class="font-bold break-words">USDC</div>');
         expect(html).toContain(`data-copy="${USDC}"`);
         expect(html).toContain(`href="https://etherscan.io/address/${USDC}"`);
         expect(html).toMatch(/<div class="text-xs">.*class="am-address"/);
@@ -869,7 +869,7 @@ describe("the Permit2 allowance lines of a swap on WaitTx and ErrorTx", () => {
 // An amount of about 47 digits or more is wider than the screen. Without the
 // break-words class its last digits are cut off at the edge. That class keeps
 // the words of a line such as `(decimals unknown)` whole.
-describe("a long amount on WaitTx and ErrorTx", () => {
+describe("a long amount on WaitTx, ErrorTx and SuccessTx", () => {
     test("each amount under the Amount figure wraps", () => {
         const decoded = {
             details: [
@@ -896,6 +896,43 @@ describe("a long amount on WaitTx and ErrorTx", () => {
         expect(html).toMatch(
             /id="error-tx-summary"\s+class="font-bold break-words"/,
         );
+        expect(html).toMatch(
+            /id="success-tx-summary"\s+class="font-bold break-words"/,
+        );
+    });
+
+    test("each amount of SuccessTx's decoded action wraps", () => {
+        state.viewData = {
+            hash: TX_HASH,
+            to: RECIPIENT,
+            chainId: TX_INFO.chainId,
+            decoded: { details: [{ label: "Amount", value: "1.0000 ETH" }] },
+        };
+        txStatus.renderSuccess();
+        expect(getElement("success-tx-decoded").innerHTML).toContain(
+            '<div class="font-bold break-words">1.0000 ETH<',
+        );
+    });
+
+    test("the name and description of SuccessTx's decoded action wrap", () => {
+        state.viewData = {
+            hash: TX_HASH,
+            to: RECIPIENT,
+            chainId: TX_INFO.chainId,
+            decoded: {
+                name: "Transfer LONGSYMBOL",
+                description: "Transfer LONGSYMBOL to a recipient",
+                details: [{ label: "Amount", value: "1.0000 ETH" }],
+            },
+        };
+        txStatus.renderSuccess();
+        const html = getElement("success-tx-decoded").innerHTML;
+        expect(html).toContain(
+            '<div class="font-bold break-words">Transfer LONGSYMBOL<',
+        );
+        expect(html).toContain(
+            '<div class="break-words">Transfer LONGSYMBOL to a recipient<',
+        );
     });
 });