fix: give every address a row of its own, so none wraps or is shortened (closes #380) (#381)

src/popup/views/helpers.js

@@ -331,6 +331,12 @@ 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
@@ -518,17 +524,29 @@ function attachCopyHandlers(container) {
 
 // Unified address rendering.
 //
-// Produces consistent HTML for any Ethereum address:
-//   • Color dot
-//   • Optional title (e.g. "Wallet 1 — Address 2") shown bold above address
-//   • Optional ENS name shown bold above address
-//   • Full address (or truncated via maxLen) with dashed-underline click-to-copy
-//   • Etherscan external link icon
+// Two stacked rows, in this order:
+//   1. Identity strip — colour dot, optional title (e.g. "Wallet 1 —
+//      Address 2") and the explorer link icon. Optional ENS name below it.
+//   2. The address itself, alone on a full-width row that never wraps
+//      (see .am-address in styles/main.css).
+//
+// 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 (min 32 chars enforced)
+//   maxLen   — if set, truncate address display. Floored at 32 characters
+//              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
@@ -536,22 +554,22 @@ function attachCopyHandlers(container) {
 function renderAddressHtml(address, opts) {
     const { title, ensName, maxLen, noLink } = opts || {};
     const dot = addressDotHtml(address);
-    const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
+    const displayAddr = maxLen
+        ? 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 += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        html += `<span class="font-bold">${escapeHtml(title)}</span>`;
     }
+    html += `${extLink}</div>`;
     if (ensName) {
-        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="font-bold">${escapeHtml(ensName)}</div>`;
     }
+    html += `<div class="am-address">${copyableHtml(displayAddr)}</div>`;
     return html;
 }