fix(aegis): 0.9.9 — address columns share one grid so they line up

Each .warow was its own grid container, so the `auto` amount column
resolved independently per row: a row holding 0.3066756 got a narrower
column than one holding 0.43789841, and the copy button therefore landed
at a different x on every line. Column widths have to be SHARED to line
up, and nothing was sharing them.

The columns are now declared once on a .walist wrapper and every row
inherits them via `grid-template-columns: subgrid`. Column gaps moved to
the parent, since a subgrid takes its gutters in the subgridded axis from
the grid it inherits and would have ignored them on the row. A
@supports fallback pins the amount column to a fixed 104px for any host
without subgrid, which keeps the copy column straight there too.

Measured across six rows with four different amount lengths, at 260,
320, 400 and 520px wide: copy left edge, amount right edge, ticker left
edge and menu right edge all have 0px spread, with no row overflow and
no clipped amount.

0.9.8 claimed this area was verified, but the check only looked for cell
overlap WITHIN each row and never compared the same column ACROSS rows —
which is exactly the defect it missed.
This commit is contained in:
Local Dev 2026-09-24 23:05:08 +02:00
parent 4754fb948b
commit e761500a2f
2 changed files with 26 additions and 10 deletions

View file

@ -443,18 +443,34 @@
"0" and "0.000123" right-align identically, actions are fixed to
46px. Net result: columns look like a table, not a flex mess. */
/* 0.9.8: five columns for the five cells the row actually renders —
icon · label · copy · amount · menu. The template still described the
pre-0.9.2 layout (six columns, including an address cell that no
icon · label · copy · amount · menu. The template used to describe
the pre-0.9.2 layout (six columns, including an address cell that no
longer exists), so every cell sat one column left of where it
belonged: copy landed in the label's space, the amount in the old
label column, and the ⋯ in the amount column instead of the edge.
That is what made copy and amount collide.
The label is the flexible column so it takes the slack and truncates
rather than squeezing the number, and the menu is pinned right. */
belonged, which is what made copy and amount collide.
0.9.9: the columns are declared ONCE on the list and every row
inherits them via subgrid. Previously each row was its own grid, so
the `auto` amount column resolved per row — a row holding
0.3066756 got a narrower column than one holding 0.43789841, and the
copy button landed at a different x on every line. Column widths
must be shared to line up, and subgrid is what shares them. */
/* Column gap lives on the parent: a subgrid takes its gutters in the
subgridded axis from the grid it inherits, so setting it on the row
would be ignored. */
.wstrip .walist { display: grid;
grid-template-columns: 16px minmax(0,1fr) 24px auto 26px;
column-gap: 8px; row-gap: 2px; }
.wstrip .warow { display: grid;
grid-template-columns: 16px minmax(0,1fr) 24px auto 26px;
gap: 8px; align-items: center; padding: 5px 6px;
grid-template-columns: subgrid; grid-column: 1 / -1;
align-items: center; padding: 5px 6px;
border-radius: 6px; border: 1px solid transparent; cursor: pointer; min-height: 30px; }
/* Fallback for a host without subgrid: pin the amount column to a fixed
width so the copy column still lines up. Wide enough for eight
decimals of BCH plus its ticker. */
@supports not (grid-template-columns: subgrid) {
.wstrip .walist { display: block; }
.wstrip .warow { grid-template-columns: 16px minmax(0,1fr) 24px 104px 26px;
grid-column: auto; gap: 8px; }
}
.wstrip .warow:hover { background: rgba(255,255,255,.04); }
.wstrip .warow.on { background: rgb(from var(--acid, #d6ff3d) r g b / .10);
border-color: rgb(from var(--acid, #d6ff3d) r g b / .35); }

View file

@ -2588,7 +2588,7 @@ function renderInlineCoinList(el, groupKey, group) {
${totalFiat ? `<span class="wtotfiat">(${esc(totalFiat)})</span>` : ""}` : ""}
</div>
${errLine}
${rows}
<div class="walist">${rows}</div>
<div class="waddwrap">
<button id="stripAddMore" title="Add another ${esc(meta.coinName)} wallet">+ Add another ${esc(meta.ticker)}</button>
</div>`;