milestone 1.0.0: approval-path security, build-integrity guard, e2e harness and filter coverage (#190)

Reviewed-on: #190

I understand this is ready for 1.0.0 - user acceptance testing remains.  No tags for now but we can think of this as `1.0.0b1`.

README.md

@@ -800,12 +800,7 @@ discoverable.
   addresses visually, as a security feature.
 - **Tailwind CSS**: Utility-first CSS via Tailwind. No custom CSS classes for
   styling. Tailwind is configured with a minimal monochrome palette. This keeps
-  the styling co-located with the markup and eliminates CSS file management. The
+  the styling co-located with the markup and eliminates CSS file management.
-  handful of classes in `styles/main.css` are not styling: `.copy-flash-*`
-  carries the copy feedback animation, and `.am-address` carries the rule that
-  an address never wraps. Both are invariants that hold in every place they
-  appear, and spelling either out as repeated utilities is how one of those
-  places drifts away from the rest.
 - **Vanilla JS**: No framework (React, Vue, Svelte, etc.). The popup UI is small
   enough that vanilla JS with simple view switching is sufficient. A framework
   would add bundle size, build complexity, and attack surface for no benefit at
@@ -854,12 +849,6 @@ that the portions still displayed will be more than adequate for the user to
 verify addresses even in the case of address spoofing attacks. Clicking an
 address will always copy the full, untruncated value.
 
-As of the address-row layout change, no view invokes that exception: every
-address in the popup is rendered on a row of its own, wide enough for all 42
-characters, and no screen truncates one to fit. The cap is still enforced in
-`truncateMiddle()` and the 32-character floor in `renderAddressHtml()`, so the
-guarantee holds for any future caller; there simply are none today.
-
 **Specific Exception — Transaction Detail view:** The transaction detail screen
 is the authoritative record of a specific transaction and shows the exact,
 untruncated amount with all meaningful decimal places (e.g. "0.00498824598498216
@@ -880,14 +869,9 @@ On those screens, when the truncated string would contain no digit from 1 to 9
 and the value does, the amount is extended to its first significant digit
 instead: `0.000000000000000001 DAI`, not `0.0000 DAI`. The test is on the whole
 truncated string, integer part included, so `1.00005` still shows as `1.0000` —
-the exception only fires where the entire displayed figure would read as zero.
+the exception only fires where the entire displayed figure would read as zero. A
-Truncation stays truncation: `0.99999` shows as `0.9999`, never rounded up. A
+genuine zero still renders `0.0000`, and truncation stays truncation: `0.99999`
-genuine zero reaching this rule renders `0.0000`, and the ERC-20
+shows as `0.9999`, never rounded up.
-`approve`/`transfer` amount does exactly that. The swap's `Amount` and
-`Min. received` lines never hand it one: the two zeros that would mislead there
-— a V4 open-delta amount and a zero minimum — are stated in words before the
-floor is reached, so on those lines a zero is never shown as `0.0000` (see the
-list of amount-slot strings below).
 
 The rule and its exception live in `src/shared/amountDisplay.js` as
 `truncateAmount()` and `truncateAmountNeverZero()`. Everything the approval and
@@ -939,38 +923,6 @@ and compare against. Reading the stored field directly instead answers `null`
 for a bundled or tracked token the explorer merely omitted, which is not a
 refusal the wallet has any reason to make.
 
-**Every string an amount slot can show:** taken together, the exceptions above
-mean an amount line on the dApp approval screen (and the wait/success/error
-screens that carry a figure forward) shows one of a fixed set of strings, not
-always a number:
-
-- A formatted quantity, e.g. `17.1900 USDT`: the token's scale is known and the
-  figure is at or above the floor, or below it and extended to its first
-  significant digit. This is `truncateAmountNeverZero()`
-  (`src/shared/amountDisplay.js`).
-- `Unlimited`: an unbounded allowance or permit, which needs no scale to
-  describe — a `uint256`-max ERC-20 `approve` (`src/popup/views/approval.js`) or
-  a Permit2 amount at the `uint160` max on a swap's `Amount`
-  (`src/shared/uniswap.js`).
-- `All available (V4 open delta)`: a V4 exact-in swap whose `amountIn` is zero.
-  V4 reads that zero as "use the whole open delta", not as a literal zero, so
-  the calldata states no quantity at all. Swap `Amount` line only
-  (`src/shared/uniswap.js`).
-- `None (no minimum guaranteed)`: a zero minimum — the swap guarantees nothing
-  back. It is a literal zero slippage floor on a V2/V3/V4 swap, and it also
-  reaches a `BALANCE_CHECK_ERC20` step: a zero `minBalance`, which once rendered
-  `0.0000` beside the token symbol, now reads this. Swap `Min. received` line
-  (`src/shared/uniswap.js`).
-- `<amount> base units (decimals unknown)`: the token's scale could not be
-  resolved, so the base-unit integer is shown with that caveat rather than
-  formatted (see Unknown token scale above). Reaches both the ERC-20 amount line
-  and the swap's `Amount` and `Min. received` (`unknownDecimalsAmount()` in
-  `src/shared/approvalAmount.js`).
-- `Unknown (not named in the calldata)`: not an amount but the currency itself —
-  the `Token In` or `Token Out` line when nothing in the calldata established
-  which token, shown beside the amount and, like the strings above, a sentence
-  rather than a value (`src/shared/uniswap.js`).
-
 #### Partial USD totals
 
 Prices are fetched for the top 25 tokens only, so an address can hold assets the
@@ -1230,17 +1182,13 @@ view would leave a wallet one click from deletion.
     - Send / Receive quick-action buttons, both acting on the active address
     - ETH/USD price display
     - Wallet list: each wallet shows its name (tap to rename inline) and a "+"
-      button for HD and xprv wallets, then one block per address. The block
+      button for HD and xprv wallets, then one block per address with "Address
-      opens with a row carrying the colour dot, "Address N" (bold when active),
+      N" (bold when active), the ENS name if resolved, the full address, an
-      an `[info]` button and an `[x]` button (only on HD and xprv wallets
+      `[info]` button, an `[x]` button (only on HD and xprv wallets holding more
-      holding more than one address); the ENS name, if resolved, is below it;
+      than one address), the address USD total, and a balance line for ETH and
-      then the full address on a row of its own, followed by the address USD
+      for each token shown for that address
-      total and a balance line for ETH and for each token shown for that address
     - "Recent Transactions": up to 25 transactions merged across every address
-      of every wallet, deduplicated by hash and filtered. Each row is three
+      of every wallet, deduplicated by hash and filtered
-      lines: age and direction, then the counterparty's colour dot (with our own
-      name for it, where it is one of our addresses) and the amount, then the
-      counterparty's full address on a row of its own
     - "Add additional wallet..." link at bottom
 - **Transitions**:
     - Tap address row → sets the active address and broadcasts

TODO.md

@@ -45,34 +45,6 @@ but the review is broader than any of them.
 
 # Completed Steps
 
-- 2026-09-21: `README.md` now documents the approval screen's amount-slot
-  vocabulary and no longer contradicts itself
-  ([#369](https://git.eeqj.de/sneak/AutistMask/issues/369)). The stale claim
-  that a genuine zero still renders `0.0000` is corrected: it holds for the
-  ERC-20 amount, but the swap's `Amount` and `Min. received` state their two
-  misleading zeros in words upstream. The amount-display section now names every
-  string a slot can show — a formatted quantity, `Unlimited`,
-  `All available (V4 open delta)`, `None (no minimum guaranteed)`, base units
-  with decimals unknown, and `Unknown (not named in the calldata)` — and records
-  that a zero `minBalance` on a `BALANCE_CHECK_ERC20` step now reads
-  `None (no minimum guaranteed)` where it once read `0.0000`. Docs only; each
-  claim checked against the tree.
-- 2026-08-30: An address no longer wraps, or is shortened to fit, in any of the
-  common views ([#380](https://git.eeqj.de/sneak/AutistMask/issues/380)). The
-  wallet list was the reported case: the address shared one row with the
-  `[info]` and `[x]` controls and folded onto a second line, which turns one
-  42-character string the user is meant to compare into two shorter ones — the
-  shape an address-poisoning attack wants. The fix is layout, not CSS: every
-  address in the popup now sits alone on a full-width row, with the colour dot,
-  the wallet title, the ENS name and the explorer link moved onto a strip above
-  it, and the transaction rows carry the counterparty's whole address instead of
-  a `truncateMiddle()`d one squeezed in beside the amount. `truncateMiddle()`
-  keeps its 10-character cap and its 32-character floor moved into
-  `renderAddressHtml()`, so the guarantee outlives having no callers. The e2e
-  suite measures every rendered address in a real Chromium — whole, one line
-  box, inside its row and inside the popup — across Home, the address, token,
-  receive, send and transaction detail screens, the confirmation screen and the
-  dApp transaction prompt.
 - 2026-08-23: Both manifests declare toolbar icons, and real PNGs at
   16/32/48/128 ship inside both archives
   ([#371](https://git.eeqj.de/sneak/AutistMask/issues/371)). Neither manifest

src/popup/index.html

@@ -213,7 +213,10 @@
                 </div>
 
                 <!-- active address display -->
-                <div id="active-address-display" class="text-xs mb-3"></div>
+                <div
+                    id="active-address-display"
+                    class="text-xs break-all mb-3"
+                ></div>
 
                 <!-- quick actions for active address -->
                 <div class="flex gap-2 mb-2">
@@ -289,7 +292,7 @@
                     class="font-bold mb-1 hidden flex items-center"
                 ></div>
                 <div
-                    class="text-xs mb-1 cursor-pointer"
+                    class="text-xs mb-1 cursor-pointer break-all"
                     title="Click to copy"
                     id="address-line"
                 >
@@ -377,14 +380,14 @@
                 ></div>
                 <h2 class="font-bold mb-1">Export Private Key</h2>
                 <p class="text-xs mb-1" id="export-privkey-title"></p>
-                <div class="text-xs mb-3">
+                <p class="text-xs mb-3">
                     <span id="export-privkey-dot"></span>
                     <span
                         id="export-privkey-address"
                         class="cursor-pointer"
                         title="Click to copy"
                     ></span>
-                </div>
+                </p>
                 <p class="text-xs mb-3 text-muted">
                     Warning: anyone with this private key can access and
                     transfer all funds from this address. Never share it.
@@ -437,7 +440,7 @@
                 </div>
 
                 <div
-                    class="text-xs mb-1 cursor-pointer"
+                    class="text-xs mb-1 cursor-pointer break-all"
                     title="Click to copy"
                     id="address-token-line"
                 >
@@ -570,16 +573,19 @@
                 <!-- ERC-20 token contract (hidden for ETH) -->
                 <div id="confirm-token-section" class="mb-3 hidden">
                     <div class="text-xs text-muted mb-1">Token contract</div>
-                    <div id="confirm-token-contract" class="text-xs"></div>
+                    <div
+                        id="confirm-token-contract"
+                        class="text-xs break-all"
+                    ></div>
                 </div>
 
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">From</div>
-                    <div id="confirm-from" class="text-xs"></div>
+                    <div id="confirm-from" class="text-xs break-all"></div>
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">To</div>
-                    <div id="confirm-to" class="text-xs"></div>
+                    <div id="confirm-to" class="text-xs break-all"></div>
                     <div
                         id="confirm-to-ens"
                         class="text-xs text-muted hidden"
@@ -722,7 +728,7 @@
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">To</div>
-                    <div id="wait-tx-to" class="text-xs"></div>
+                    <div id="wait-tx-to" class="text-xs break-all"></div>
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">Transaction hash</div>
@@ -741,7 +747,7 @@
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">To</div>
-                    <div id="success-tx-to" class="text-xs"></div>
+                    <div id="success-tx-to" class="text-xs break-all"></div>
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">Block</div>
@@ -768,7 +774,7 @@
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">To</div>
-                    <div id="error-tx-to" class="text-xs"></div>
+                    <div id="error-tx-to" class="text-xs break-all"></div>
                 </div>
                 <div class="mb-3">
                     <div
@@ -805,9 +811,9 @@
                     <canvas id="receive-qr"></canvas>
                 </div>
                 <div
-                    class="border border-border p-2 mb-3 text-xs cursor-pointer"
+                    class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
                 >
-                    <div id="receive-address-block" class="select-all"></div>
+                    <span id="receive-address-block" class="select-all"></span>
                     <span id="receive-etherscan-link"></span>
                 </div>
                 <button
@@ -1233,7 +1239,7 @@
                 </p>
                 <div
                     id="delete-address-value"
-                    class="text-xs mb-2 min-h-[1rem]"
+                    class="text-xs mb-2 break-all min-h-[1rem]"
                 ></div>
                 <div
                     class="text-xs mb-2 border border-border border-dashed p-2"
@@ -1423,11 +1429,14 @@
                     </div>
                     <div class="mb-2">
                         <div class="text-xs text-muted mb-1">From</div>
-                        <div id="tx-detail-from" class="text-xs"></div>
+                        <div
+                            id="tx-detail-from"
+                            class="text-xs break-all"
+                        ></div>
                     </div>
                     <div class="mb-2">
                         <div class="text-xs text-muted mb-1">To</div>
-                        <div id="tx-detail-to" class="text-xs"></div>
+                        <div id="tx-detail-to" class="text-xs break-all"></div>
                     </div>
                 </div>
 
@@ -1464,7 +1473,7 @@
                         </div>
                         <div
                             id="tx-detail-token-contract"
-                            class="text-xs"
+                            class="text-xs break-all"
                         ></div>
                     </div>
                 </div>
@@ -1558,11 +1567,11 @@
 
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">From</div>
-                    <div id="approve-tx-from" class="text-xs"></div>
+                    <div id="approve-tx-from" class="text-xs break-all"></div>
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">Contract</div>
-                    <div id="approve-tx-to" class="text-xs"></div>
+                    <div id="approve-tx-to" class="text-xs break-all"></div>
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">Value</div>
@@ -1664,7 +1673,7 @@
 
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">From</div>
-                    <div id="approve-sign-from" class="text-xs"></div>
+                    <div id="approve-sign-from" class="text-xs break-all"></div>
                 </div>
 
                 <div class="mb-3">

src/popup/styles/main.css

@@ -44,23 +44,3 @@ body {
         background-color 225ms ease-out,
         color 225ms ease-out;
 }
-
-/* An address is one atomic string, so it gets a row of its own and never
- * breaks across lines. A wrapped address reads as two shorter strings, and
- * two shorter strings are exactly what an address-poisoning attack needs
- * the user to compare instead of the whole thing. Every view that shows an
- * address puts it in one of these, alone: the colour dot, the wallet title,
- * the ENS name and the explorer link all live on their own line above, so
- * nothing competes with the 42 characters for width.
- *
- * overflow-x is the escape hatch, not the mechanism. The row is wide enough
- * for a full address at every nesting depth the popup uses; if that ever
- * stops being true — a font with wider glyphs, a browser zoom — the row
- * scrolls and the user can still reach the last character, rather than the
- * tail being clipped away by #app's overflow-x-hidden with nothing to say
- * it happened. tests/e2e asserts the scroll is never actually needed. */
-.am-address {
-    display: block;
-    white-space: nowrap;
-    overflow-x: auto;
-}

src/popup/views/addressDetail.js

@@ -7,6 +7,7 @@ const {
     addressTitle,
     escapeHtml,
     displaySymbol,
+    truncateMiddle,
     renderAddressHtml,
     attachCopyHandlers,
     goBack,
@@ -228,12 +229,10 @@ function renderTransactions(txs) {
         const amountStr = tx.value
             ? escapeHtml(tx.value + " " + sym)
             : escapeHtml(sym);
-        // The counterparty used to be squeezed in beside the amount and
+        const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
-        // truncated to whatever was left over. It gets its own row now and
+        const displayAddr =
-        // is shown whole; the title or ENS name, where there is one, names
+            title || ensName || truncateMiddle(counterparty, maxAddr);
-        // it on the line above rather than replacing it.
+        const addrStr = escapeHtml(displayAddr);
-        const nameStr = escapeHtml(title || ensName || "");
-        const addrStr = escapeHtml(counterparty);
         const dot = addressDotHtml(counterparty);
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity:0.5;" : "";
@@ -241,8 +240,7 @@ function renderTransactions(txs) {
         const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
-        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${nameStr}</span><span>${amountStr}</span></div>`;
+        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
-        html += `<div class="am-address">${addrStr}</div>`;
         html += `</div>`;
         i++;
     }

src/popup/views/addressToken.js

@@ -10,6 +10,7 @@ const {
     addressTitle,
     escapeHtml,
     displaySymbol,
+    truncateMiddle,
     balanceLine,
     unknownableAmount,
     renderAddressHtml,
@@ -304,12 +305,10 @@ function renderTransactions(txs) {
         const amountStr = tx.value
             ? escapeHtml(tx.value + " " + sym)
             : escapeHtml(sym);
-        // The counterparty used to be squeezed in beside the amount and
+        const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
-        // truncated to whatever was left over. It gets its own row now and
+        const displayAddr =
-        // is shown whole; the title or ENS name, where there is one, names
+            title || ensName || truncateMiddle(counterparty, maxAddr);
-        // it on the line above rather than replacing it.
+        const addrStr = escapeHtml(displayAddr);
-        const nameStr = escapeHtml(title || ensName || "");
-        const addrStr = escapeHtml(counterparty);
         const dot = addressDotHtml(counterparty);
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity:0.5;" : "";
@@ -317,8 +316,7 @@ function renderTransactions(txs) {
         const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
-        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${nameStr}</span><span>${amountStr}</span></div>`;
+        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
-        html += `<div class="am-address">${addrStr}</div>`;
         html += `</div>`;
         i++;
     }

src/popup/views/helpers.js

@@ -331,12 +331,6 @@ function addressHoldsFunds(addr) {
     return false;
 }
 
-// The fewest characters of an address any caller may ask to display. The
-// 10-character cap inside truncateMiddle() is the other half of the same
-// guarantee; this is the half that used to be spelled out at each call
-// site, and is now enforced once in renderAddressHtml().
-const ADDRESS_MIN_DISPLAY_LEN = 32;
-
 // Truncate the middle of a string, replacing removed characters with "…".
 // Safety: refuses to truncate more than 10 characters, which is the maximum
 // that still prevents address spoofing attacks (see Display Consistency in
@@ -524,29 +518,17 @@ function attachCopyHandlers(container) {
 
 // Unified address rendering.
 //
-// Two stacked rows, in this order:
+// Produces consistent HTML for any Ethereum address:
-//   1. Identity strip — colour dot, optional title (e.g. "Wallet 1 —
+//   • Color dot
-//      Address 2") and the explorer link icon. Optional ENS name below it.
+//   • Optional title (e.g. "Wallet 1 — Address 2") shown bold above address
-//   2. The address itself, alone on a full-width row that never wraps
+//   • Optional ENS name shown bold above address
-//      (see .am-address in styles/main.css).
+//   • Full address (or truncated via maxLen) with dashed-underline click-to-copy
-//
+//   • Etherscan external link icon
-// The split is the point. Everything used to sit on one line: dot, address
-// and link together, with `break-all` to let the address fold when the line
-// ran out. In the wallet list, where the row also carried [info] and [x],
-// it ran out every time — the bug in #380 — and a folded address is a
-// spoofing hazard, not a cosmetic one. Nothing shares the address's row
-// now, so all 42 characters fit at every nesting depth the popup uses and
-// nothing has to be dropped or folded to make room.
 //
 // Options object:
 //   title    — wallet title string (from addressTitle)
 //   ensName  — ENS name string
-//   maxLen   — if set, truncate address display. Floored at 32 characters
+//   maxLen   — if set, truncate address display (min 32 chars enforced)
-//              here rather than by the caller: no view passes it any more
-//              (every address row is wide enough for all 42 characters),
-//              so a floor that lived in the callers would have gone away
-//              with them, and the "at least 32 characters" guarantee has
-//              to survive having no current callers to be a guarantee.
 //   noLink   — if true, omit etherscan link
 //
 // After inserting the returned HTML into the DOM, call
@@ -554,22 +536,22 @@ function attachCopyHandlers(container) {
 function renderAddressHtml(address, opts) {
     const { title, ensName, maxLen, noLink } = opts || {};
     const dot = addressDotHtml(address);
-    const displayAddr = maxLen
+    const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
-        ? truncateMiddle(address, Math.max(ADDRESS_MIN_DISPLAY_LEN, maxLen))
-        : address;
     const link = etherscanAddressUrl(address);
     const extLink = noLink ? "" : etherscanLinkHtml(link);
 
     let html = "";
-    html += `<div class="flex items-center">${dot}`;
     if (title) {
-        html += `<span class="font-bold">${escapeHtml(title)}</span>`;
+        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
     }
-    html += `${extLink}</div>`;
     if (ensName) {
-        html += `<div class="font-bold">${escapeHtml(ensName)}</div>`;
+        html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
+    }
+    if (title || ensName) {
+        html += `<div class="flex items-center">${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
+    } else {
+        html += `<div class="flex items-center">${dot}${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
     }
-    html += `<div class="am-address">${copyableHtml(displayAddr)}</div>`;
     return html;
 }
 

src/popup/views/home.js

@@ -9,6 +9,7 @@ const {
     addressTitle,
     escapeHtml,
     displaySymbol,
+    truncateMiddle,
     renderAddressHtml,
     attachCopyHandlers,
     pushCurrentView,
@@ -116,13 +117,10 @@ function renderHomeTxList(ctx) {
         const amountStr = tx.value
             ? escapeHtml(tx.value + " " + sym)
             : escapeHtml(sym);
-        // The counterparty used to be squeezed in beside the amount and
-        // truncated to whatever was left over. It gets its own row now and
-        // is shown whole; the title, when it is one of our own addresses,
-        // names it on the line above rather than replacing it.
         const title = addressTitle(counterparty, state.wallets);
-        const titleStr = title ? escapeHtml(title) : "";
+        const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
-        const addrStr = escapeHtml(counterparty);
+        const displayAddr = title || truncateMiddle(counterparty, maxAddr);
+        const addrStr = escapeHtml(displayAddr);
         const dot = addressDotHtml(counterparty);
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity:0.5;" : "";
@@ -130,8 +128,7 @@ function renderHomeTxList(ctx) {
         const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
-        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${titleStr}</span><span>${amountStr}</span></div>`;
+        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
-        html += `<div class="am-address">${addrStr}</div>`;
         html += `</div>`;
         i++;
     }
@@ -255,22 +252,17 @@ function walletListHtml() {
                 : "";
             const dot = addressDotHtml(addr.address);
             const titleBold = isActive ? "font-bold" : "";
-            // [info] and [x] ride on the "Address N" line, which was empty
+            html += `<div class="text-xs ${titleBold}">Address ${ai + 1}</div>`;
-            // to its right, so the address below gets the row to itself.
-            // They used to sit beside the address and take about a third of
-            // the width off it, which is what made a 42-character address
-            // fold onto a second line here and nowhere else (#380).
-            html += `<div class="flex text-xs items-center justify-between">`;
-            html += `<span class="flex items-center ${titleBold}">${dot}Address ${ai + 1}</span>`;
-            html += `<span class="flex-shrink-0 ml-1">${infoBtn}${removeBtn}</span>`;
-            html += `</div>`;
             if (addr.ensName) {
                 // An ENS reverse record is whatever the name owner set it
                 // to; renderAddressHtml() escapes its own copy of this and
                 // this list was the one that did not.
-                html += `<div class="text-xs font-bold">${escapeHtml(addr.ensName)}</div>`;
+                html += `<div class="text-xs font-bold flex items-center">${dot}${escapeHtml(addr.ensName)}</div>`;
             }
-            html += `<div class="am-address text-xs">${escapeHtml(addr.address)}</div>`;
+            html += `<div class="flex text-xs items-center justify-between">`;
+            html += `<span class="flex items-center break-all">${addr.ensName ? "" : dot}${escapeHtml(addr.address)}</span>`;
+            html += `<span class="flex-shrink-0 ml-1">${infoBtn}${removeBtn}</span>`;
+            html += `</div>`;
             const addrTotal = formatAddressTotal(getAddressValue(addr));
             html += `<div class="text-xs text-muted text-right min-h-[1rem]">${addrTotal || "&nbsp;"}</div>`;
             html += balanceLinesForAddress(

src/popup/views/transactionDetail.js

@@ -137,16 +137,10 @@ function render() {
         if (tx.contractAddress) {
             const dot = addressDotHtml(tx.contractAddress);
             const link = explorerUrl("token", tx.contractAddress);
-            // Hand-rolled rather than renderAddressHtml() because the
-            // link goes to the explorer's /token/ page, not /address/.
-            // Same two-row shape though: dot and link on the strip, the
-            // contract address alone on the row below it.
             tokenContractEl.innerHTML =
                 `<div class="flex items-center">${dot}` +
+                copyableHtml(tx.contractAddress, "break-all") +
                 etherscanLinkHtml(link) +
-                `</div>` +
-                `<div class="am-address">` +
-                copyableHtml(tx.contractAddress) +
                 `</div>`;
             tokenContractSection.classList.remove("hidden");
         } else {

tests/e2e/run.js

@@ -1525,7 +1525,6 @@ async function goToConfirm(page, { token, balance, amount }) {
     await page.fill("#send-amount", amount);
     await page.click("#btn-send-review");
     await visible(page, "#view-confirm-tx");
-    await assertAddressesFit(page, "the confirmation screen");
 }
 
 // A balance as the main view renders it: balanceLinesForAddress() writes
@@ -3263,8 +3262,6 @@ test("eth_sendTransaction signs the approved transaction and broadcasts it (#183
             JSON.stringify(screen.data),
     );
 
-    await assertAddressesFit(popup, "the dApp transaction prompt");
-
     const broadcastBefore = env.routeOpts.broadcastTransactions.length;
     await popup.fill("#approve-tx-password", PASSWORD);
     await popup.click("#btn-approve-tx");
@@ -3428,206 +3425,6 @@ test("the password never crossed either boundary in this section (#183)", async
     await env.dapp.close();
 });
 
-// ------------------------------------------- address layout (#380)
-//
-// "addresses should never wrap in the common views. this doesn't mean to
-// just change the css, but update the layout itself so the untruncated
-// addresses are shown in full and don't mess up the layout."
-//
-// Every one of these questions is about glyph advances and the width of
-// the box an address landed in, and nothing in the markup answers any of
-// them: a row can hold `white-space: nowrap` and still be too narrow, and
-// the popup's own `overflow-x-hidden` would then hide the evidence by
-// clipping the tail. So they are measured in a real Chromium, on the real
-// rendered views, one assertion per property #380 names:
-//
-//   - the whole address is there (42 characters, no ellipsis)
-//   - it occupies exactly one line box
-//   - it fits its row, so the overflow-x escape hatch never engages
-//   - its row ends inside the popup's content box
-//   - and the document itself does not scroll sideways
-//
-// The narrowest containers the popup has are covered here — the
-// transaction detail wells (`bg-well p-3 mx-1`) and the token contract
-// well — so the wider ones cannot fail while these pass.
-
-// Everything on screen that carries an address, measured in one pass.
-// Views other than the current one are display:none and measure zero, so
-// filtering on width leaves exactly what a user can see right now.
-function addressRowReport(page) {
-    return page.evaluate(() => {
-        const app = document.getElementById("app");
-        const appRight = app.getBoundingClientRect().right;
-        const rows = [];
-        for (const el of document.querySelectorAll(".am-address")) {
-            const box = el.getBoundingClientRect();
-            if (box.width === 0) continue;
-            // Line boxes are counted off the inline content, because the
-            // element's own rect is one box whether the text inside it
-            // wrapped or not. A Range yields a rect per contained node as
-            // well as per line, so it is the distinct tops that count:
-            // a copyable span and the text inside it share one.
-            const range = document.createRange();
-            range.selectNodeContents(el);
-            const tops = new Set(
-                Array.from(range.getClientRects()).map((r) =>
-                    Math.round(r.top),
-                ),
-            );
-            rows.push({
-                text: el.innerText.trim(),
-                lineBoxes: tops.size,
-                overflow: el.scrollWidth - el.clientWidth,
-                overhang: Math.round(box.right - appRight),
-            });
-        }
-        return {
-            rows,
-            pageOverflow:
-                document.documentElement.scrollWidth -
-                document.documentElement.clientWidth,
-        };
-    });
-}
-
-async function assertAddressesFit(page, where) {
-    const report = await addressRowReport(page);
-    assert(
-        report.rows.length > 0,
-        where + ": no address rows were rendered, so nothing was measured",
-    );
-    for (const row of report.rows) {
-        assert(
-            /^0x[0-9a-fA-F]{40}$/.test(row.text),
-            where +
-                ": the address is not shown whole: " +
-                JSON.stringify(row.text),
-        );
-        assert(
-            row.lineBoxes === 1,
-            where +
-                ": " +
-                row.text +
-                " wrapped onto " +
-                row.lineBoxes +
-                " lines",
-        );
-        assert(
-            row.overflow <= 1,
-            where +
-                ": " +
-                row.text +
-                " is " +
-                row.overflow +
-                "px wider than the row holding it",
-        );
-        assert(
-            row.overhang <= 1,
-            where +
-                ": " +
-                row.text +
-                " reaches " +
-                row.overhang +
-                "px past the popup's content box",
-        );
-    }
-    assert(
-        report.pageOverflow <= 0,
-        where + ": the popup scrolls sideways by " + report.pageOverflow + "px",
-    );
-    return report.rows.length;
-}
-
-// Back to Home from wherever the suite above finished, without assuming
-// which screen that was. Every screen the popup can rest on has a Back
-// button, and Home has none, so unwinding until Home shows is the one
-// route that does not depend on the order of the tests before this point.
-async function unwindToHome(page) {
-    for (let i = 0; i < 12; i++) {
-        if (await page.isVisible("#view-main")) return;
-        const back = page
-            .locator(".view:not(.hidden) button", { hasText: "Back" })
-            .first();
-        if ((await back.count()) === 0) break;
-        await back.click();
-        await page.waitForTimeout(150);
-    }
-    await visible(page, "#view-main");
-}
-
-// The reproduction from the issue: a wallet holding more than one address.
-// Every address in the list is a full 42 characters competing with the
-// [info] and [x] controls for one row's width, which is the state the
-// wallet view was reported wrapping in.
-test("a wallet with two addresses lists both in full, unwrapped (#380)", async (env) => {
-    await unwindToHome(env.page);
-
-    const before = await env.page
-        .locator("#wallet-list .btn-addr-info")
-        .count();
-    await env.page.locator("#wallet-list .btn-add-address").first().click();
-    await env.page.waitForFunction(
-        (n) =>
-            document.querySelectorAll("#wallet-list .btn-addr-info").length > n,
-        before,
-        { timeout: 60000 },
-    );
-
-    const shown = await assertAddressesFit(env.page, "the wallet list");
-    assert(
-        shown >= before + 1,
-        "the wallet list measured " +
-            shown +
-            " addresses, fewer than the " +
-            (before + 1) +
-            " it now holds",
-    );
-
-    // The [x] control only exists on a wallet holding more than one
-    // address, so its presence is also the proof the second one landed.
-    const removable = await env.page
-        .locator("#wallet-list .btn-remove-address")
-        .count();
-    assert(removable > 0, "the second address did not reach the wallet list");
-});
-
-test("every common view shows its addresses in full on one line (#380)", async (env) => {
-    await unwindToHome(env.page);
-    await assertAddressesFit(env.page, "Home");
-
-    await env.page.locator("#wallet-list .btn-addr-info").first().click();
-    await visible(env.page, "#view-address");
-    await visible(env.page, "#tx-list .tx-row");
-    await assertAddressesFit(env.page, "the address screen");
-
-    await env.page.click("#btn-receive");
-    await visible(env.page, "#view-receive");
-    await assertAddressesFit(env.page, "the receive screen");
-    await env.page.click("#btn-receive-back");
-    await visible(env.page, "#view-address");
-
-    await env.page.click("#btn-send");
-    await visible(env.page, "#view-send");
-    await assertAddressesFit(env.page, "the send screen");
-    await env.page.click("#btn-send-back");
-    await visible(env.page, "#view-address");
-
-    // The transaction detail screen carries the narrowest address rows in
-    // the popup: its fields sit inside a well that takes another 24px of
-    // padding and 8px of margin off the content width, and the token
-    // contract row there is narrower still.
-    await env.page.locator("#address-balances .balance-row").first().click();
-    await visible(env.page, "#view-address-token");
-    await assertAddressesFit(env.page, "the token screen");
-    await env.page.click("#btn-address-token-back");
-    await visible(env.page, "#view-address");
-
-    await env.page.locator("#tx-list .tx-row").first().click();
-    await visible(env.page, "#view-transaction");
-    await visible(env.page, "#tx-detail-token-contract-section");
-    await assertAddressesFit(env.page, "the transaction detail screen");
-});
-
 // ---------------------------------------------------------------- runner
 
 async function main() {