Fix horizontal overflow: overflow-x-hidden on body and app, remove shrink-0 from 42ch spans
All checks were successful
check / check (push) Successful in 13s

The 42ch fixed-width spans with shrink-0 prevented flex from shrinking
them when the container was narrower, causing horizontal scrolling.
Also added overflow-x: hidden on body and #app as a safety net.
This commit is contained in:
2026-02-26 02:29:11 +07:00
parent 3eeaa7a7b2
commit cef3d2ad37
4 changed files with 5 additions and 8 deletions

View File

@@ -7,7 +7,7 @@
<link rel="stylesheet" href="styles.css" />
</head>
<body class="bg-bg text-fg font-mono text-sm">
<div id="app" class="p-2">
<div id="app" class="p-2 overflow-x-hidden">
<!-- ============ GLOBAL TITLE BAR ============ -->
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
@@ -201,11 +201,7 @@
class="flex text-xs mb-3 cursor-pointer"
title="Click to copy"
>
<span
id="address-full"
class="shrink-0"
style="width: 42ch"
></span>
<span id="address-full" style="width: 42ch"></span>
<span
id="address-usd-total"
class="text-right text-muted flex-1"

View File

@@ -15,4 +15,5 @@
body {
width: 396px;
overflow-x: hidden;
}

View File

@@ -76,7 +76,7 @@ function balanceLine(symbol, amount, price) {
const usd = price ? formatUsd(amount * price) : "";
return (
`<div class="flex text-xs">` +
`<span class="flex justify-between shrink-0" style="width:42ch">` +
`<span class="flex justify-between" style="width:42ch">` +
`<span>${symbol}</span>` +
`<span>${qty}</span>` +
`</span>` +

View File

@@ -40,7 +40,7 @@ function render(ctx) {
}
const addrUsd = formatUsd(getAddressValueUsd(addr));
html += `<div class="flex text-xs">`;
html += `<span class="shrink-0" style="width:42ch">${addr.address}</span>`;
html += `<span style="width:42ch">${addr.address}</span>`;
html += `<span class="text-right text-muted flex-1">${addrUsd}</span>`;
html += `</div>`;
html += balanceLinesForAddress(addr);