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:
parent
4754fb948b
commit
e761500a2f
2 changed files with 26 additions and 10 deletions
|
|
@ -443,18 +443,34 @@
|
||||||
"0" and "0.000123" right-align identically, actions are fixed to
|
"0" and "0.000123" right-align identically, actions are fixed to
|
||||||
46px. Net result: columns look like a table, not a flex mess. */
|
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 —
|
/* 0.9.8: five columns for the five cells the row actually renders —
|
||||||
icon · label · copy · amount · menu. The template still described the
|
icon · label · copy · amount · menu. The template used to describe
|
||||||
pre-0.9.2 layout (six columns, including an address cell that no
|
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
|
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
|
belonged, which is what made copy and amount collide.
|
||||||
label column, and the ⋯ in the amount column instead of the edge.
|
0.9.9: the columns are declared ONCE on the list and every row
|
||||||
That is what made copy and amount collide.
|
inherits them via subgrid. Previously each row was its own grid, so
|
||||||
The label is the flexible column so it takes the slack and truncates
|
the `auto` amount column resolved per row — a row holding
|
||||||
rather than squeezing the number, and the menu is pinned right. */
|
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;
|
.wstrip .warow { display: grid;
|
||||||
grid-template-columns: 16px minmax(0,1fr) 24px auto 26px;
|
grid-template-columns: subgrid; grid-column: 1 / -1;
|
||||||
gap: 8px; align-items: center; padding: 5px 6px;
|
align-items: center; padding: 5px 6px;
|
||||||
border-radius: 6px; border: 1px solid transparent; cursor: pointer; min-height: 30px; }
|
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:hover { background: rgba(255,255,255,.04); }
|
||||||
.wstrip .warow.on { background: rgb(from var(--acid, #d6ff3d) r g b / .10);
|
.wstrip .warow.on { background: rgb(from var(--acid, #d6ff3d) r g b / .10);
|
||||||
border-color: rgb(from var(--acid, #d6ff3d) r g b / .35); }
|
border-color: rgb(from var(--acid, #d6ff3d) r g b / .35); }
|
||||||
|
|
|
||||||
|
|
@ -2588,7 +2588,7 @@ function renderInlineCoinList(el, groupKey, group) {
|
||||||
${totalFiat ? `<span class="wtotfiat">(${esc(totalFiat)})</span>` : ""}` : ""}
|
${totalFiat ? `<span class="wtotfiat">(${esc(totalFiat)})</span>` : ""}` : ""}
|
||||||
</div>
|
</div>
|
||||||
${errLine}
|
${errLine}
|
||||||
${rows}
|
<div class="walist">${rows}</div>
|
||||||
<div class="waddwrap">
|
<div class="waddwrap">
|
||||||
<button id="stripAddMore" title="Add another ${esc(meta.coinName)} wallet">+ Add another ${esc(meta.ticker)}</button>
|
<button id="stripAddMore" title="Add another ${esc(meta.coinName)} wallet">+ Add another ${esc(meta.ticker)}</button>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue