Fix tx list overflow: use truncate on left spans, shrink-0+pl-2 on right
All checks were successful
check / check (push) Successful in 13s

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.
This commit is contained in:
2026-02-26 02:30:32 +07:00
parent cef3d2ad37
commit d0cca13715
2 changed files with 6 additions and 6 deletions

View File

@@ -239,7 +239,7 @@
<div class="border-b border-border pb-1 mb-1"> <div class="border-b border-border pb-1 mb-1">
<h2 class="font-bold">Transactions</h2> <h2 class="font-bold">Transactions</h2>
</div> </div>
<div id="tx-list"> <div id="tx-list" class="overflow-hidden">
<div class="text-muted text-xs py-1">Loading...</div> <div class="text-muted text-xs py-1">Loading...</div>
</div> </div>
</div> </div>

View File

@@ -113,25 +113,25 @@ function renderTransactions(txs) {
const line1 = document.createElement("div"); const line1 = document.createElement("div");
line1.className = "flex justify-between"; line1.className = "flex justify-between";
const age = document.createElement("span"); const age = document.createElement("span");
age.className = "text-muted"; age.className = "text-muted truncate";
age.textContent = timeAgo(tx.timestamp); age.textContent = timeAgo(tx.timestamp);
age.title = isoDate(tx.timestamp); age.title = isoDate(tx.timestamp);
const dir = document.createElement("span"); 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)" : ""); dir.textContent = dirLabel + (tx.isError ? " (failed)" : "");
line1.appendChild(age); line1.appendChild(age);
line1.appendChild(dir); line1.appendChild(dir);
const amountStr = tx.value + " " + tx.symbol; const amountStr = tx.value + " " + tx.symbol;
const line2 = document.createElement("div"); const line2 = document.createElement("div");
line2.className = "flex justify-between min-w-0"; line2.className = "flex justify-between";
const addr = document.createElement("span"); 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)); const maxAddr = Math.max(10, 38 - Math.max(0, amountStr.length - 10));
addr.textContent = truncateMiddle(counterparty, maxAddr); addr.textContent = truncateMiddle(counterparty, maxAddr);
addr.title = counterparty; addr.title = counterparty;
const amount = document.createElement("span"); const amount = document.createElement("span");
amount.className = "shrink-0"; amount.className = "shrink-0 pl-2";
amount.textContent = amountStr; amount.textContent = amountStr;
line2.appendChild(addr); line2.appendChild(addr);
line2.appendChild(amount); line2.appendChild(amount);