Bins: fixed N-column grid per letter group
Build and push image / build (push) Successful in 52s

The bins-by-letter grid used auto-fill with a 380px minimum, so a row
of A1-A6 wrapped once the viewport got tight, and rows with fewer
bins than the auto-fill column count left empty tracks on the right.

Switch to repeat(N, minmax(0, 1fr)) where N is the number of bins in
the group: cards smush to fit so a letter never wraps to a second
visual row, and minmax(0, 1fr) lets columns share whatever width is
available so a sparse row (e.g. C with 2 bins) widens to fill the
line just as a dense row does.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-03 22:14:45 -04:00
parent d335525073
commit c7f3bf25d1
+1 -1
View File
@@ -102,7 +102,7 @@ export function BinsView({
<div <div
style={{ style={{
display: "grid", display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(380px, 1fr))", gridTemplateColumns: `repeat(${bins.length}, minmax(0, 1fr))`,
gap: 14, gap: 14,
}} }}
> >