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
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:
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user