Tiles view: +/- control for cards per row

Adjusts the tile grid's column count as an offset from the existing
width-based auto-fill default, shared across Library, Decks, Card search,
and set card lists. Clicking the count resets to the default.
This commit is contained in:
2026-10-16 21:14:43 -05:00
parent 214a535588
commit 6072d44ebe
6 changed files with 149 additions and 4 deletions

View File

@@ -2304,6 +2304,11 @@ tbody tr:hover {
.tile-rotated {
grid-column: span 2;
}
/* …except when the per-row control is down to one column, where a span of 2
would add an implicit second column and overflow. */
.tile-grid-single .tile-rotated {
grid-column: auto;
}
.tile-img-wrap {
position: relative;
}
@@ -2447,6 +2452,11 @@ tbody tr:hover {
gap: 4px;
align-items: center;
}
/* Inputs keep an intrinsic ~160px width that would overflow tiles narrowed
by the per-row control; let them shrink with the tile instead. */
.tile-footer input {
min-width: 0;
}
/* ============================================================
Toolbar controls: group-by + view toggle
@@ -2491,6 +2501,25 @@ tbody tr:hover {
background: var(--accent);
color: #fff;
}
.view-toggle button:disabled {
background: transparent;
opacity: 0.4;
cursor: default;
}
/* Tiles-per-row stepper (see `TileColumnsControl`): same segmented look as
the List/Tiles toggle, with a fixed-width count between − and +. */
.tile-columns button {
padding: 5px 9px;
font-variant-numeric: tabular-nums;
}
.tile-columns .tile-columns-count {
min-width: 2.2em;
padding-left: 4px;
padding-right: 4px;
}
.tile-columns .tile-columns-count:disabled {
opacity: 1;
}
/* ============================================================
Deck metadata (format + commander)