Use inline styles for tx list items to fix overflow
Some checks failed
check / check (push) Has been cancelled
Some checks failed
check / check (push) Has been cancelled
This commit is contained in:
@@ -106,32 +106,39 @@ function renderTransactions(txs) {
|
|||||||
const errorStyle = tx.isError ? " opacity:0.5" : "";
|
const errorStyle = tx.isError ? " opacity:0.5" : "";
|
||||||
|
|
||||||
const row = document.createElement("div");
|
const row = document.createElement("div");
|
||||||
row.className =
|
row.style.cssText =
|
||||||
"py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover overflow-hidden";
|
"padding:0.5rem 0;border-bottom:1px solid #ccc;font-size:12px;cursor:pointer;overflow:hidden;" +
|
||||||
if (errorStyle) row.style.cssText = errorStyle;
|
errorStyle;
|
||||||
|
|
||||||
const line1 = document.createElement("div");
|
const line1 = document.createElement("div");
|
||||||
line1.className = "flex justify-between overflow-hidden";
|
line1.style.cssText =
|
||||||
|
"display:flex;justify-content:space-between;overflow:hidden;";
|
||||||
const age = document.createElement("span");
|
const age = document.createElement("span");
|
||||||
age.className = "text-muted min-w-0 truncate";
|
age.style.cssText =
|
||||||
|
"color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;";
|
||||||
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 = "shrink-0 pl-2" + (tx.isError ? " text-muted" : "");
|
dir.style.cssText =
|
||||||
|
"flex-shrink:0;padding-left:0.5rem;white-space:nowrap;" +
|
||||||
|
(tx.isError ? "color:#666;" : "");
|
||||||
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 overflow-hidden";
|
line2.style.cssText =
|
||||||
|
"display:flex;justify-content:space-between;overflow:hidden;";
|
||||||
const addr = document.createElement("span");
|
const addr = document.createElement("span");
|
||||||
addr.className = "min-w-0 truncate";
|
addr.style.cssText =
|
||||||
|
"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;";
|
||||||
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 pl-2";
|
amount.style.cssText =
|
||||||
|
"flex-shrink:0;padding-left:0.5rem;white-space:nowrap;";
|
||||||
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