From d0cca13715936eb2f2d3eafae01fa71f83b18b8c Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 02:30:32 +0700
Subject: [PATCH] Fix tx list overflow: use truncate on left spans,
 shrink-0+pl-2 on right

Left-side spans (age, address) get tailwind truncate class so they
can't push the row wider than its container. Right-side spans (direction,
amount) get shrink-0 so they keep their full text. Also added
overflow-hidden on #tx-list container.
---
 src/popup/index.html             |  2 +-
 src/popup/views/addressDetail.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index fedad12..4071d16 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -239,7 +239,7 @@
                     <div class="border-b border-border pb-1 mb-1">
                         <h2 class="font-bold">Transactions</h2>
                     </div>
-                    <div id="tx-list">
+                    <div id="tx-list" class="overflow-hidden">
                         <div class="text-muted text-xs py-1">Loading...</div>
                     </div>
                 </div>
diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 8e7d462..123ea6b 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -113,25 +113,25 @@ function renderTransactions(txs) {
         const line1 = document.createElement("div");
         line1.className = "flex justify-between";
         const age = document.createElement("span");
-        age.className = "text-muted";
+        age.className = "text-muted truncate";
         age.textContent = timeAgo(tx.timestamp);
         age.title = isoDate(tx.timestamp);
         const dir = document.createElement("span");
-        dir.className = tx.isError ? "text-muted" : "";
+        dir.className = "shrink-0 pl-2" + (tx.isError ? " text-muted" : "");
         dir.textContent = dirLabel + (tx.isError ? " (failed)" : "");
         line1.appendChild(age);
         line1.appendChild(dir);
 
         const amountStr = tx.value + " " + tx.symbol;
         const line2 = document.createElement("div");
-        line2.className = "flex justify-between min-w-0";
+        line2.className = "flex justify-between";
         const addr = document.createElement("span");
-        addr.className = "pr-2 overflow-hidden";
+        addr.className = "truncate";
         const maxAddr = Math.max(10, 38 - Math.max(0, amountStr.length - 10));
         addr.textContent = truncateMiddle(counterparty, maxAddr);
         addr.title = counterparty;
         const amount = document.createElement("span");
-        amount.className = "shrink-0";
+        amount.className = "shrink-0 pl-2";
         amount.textContent = amountStr;
         line2.appendChild(addr);
         line2.appendChild(amount);