A card clips what it holds, so a long list squeezed each to a sliver to fit the grid; its rows are now as tall as their cards.
- commit
- fec7b36daab98507804a811045f0da73552c3040
- parent
- 23c10d9f4c476a2b1d380096a2e4858274e8309c
- author
- FelineStateMachine <226808055+FelineStateMachine@users.noreply.github.com>
- kind
- fix risk score 1.4 of 3, Jev's estimate
| M | frontend/ | 4 | +++- |
@@ -553,7 +553,9 @@ body:not(.mode-guide) .g-cell.rec-on::after { animation: none; } /* hidden, so s
553553 .r-detail .rd-art { align-self: stretch; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--ink-2) center/cover no-repeat;554554 -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }555555 .r-detail .rd-empty { font: 600 28px/1.15 var(--f-display); color: var(--muted); max-width: 30ch; }556-.r-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; align-content: start; overflow: auto; min-height: 0; padding: 7px; scrollbar-width: thin; }556+/* Rows as tall as their cards: a card clips what it holds, which would557+ otherwise let a long list squeeze it to a sliver to fit. */558+.r-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: max-content; gap: 18px; align-content: start; overflow: auto; min-height: 0; padding: 7px; scrollbar-width: thin; }557559 .r-card { background: var(--ink-2); border-radius: 3px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s; }558560 .r-card:hover { box-shadow: 0 0 0 1px var(--line-2); }559561 .r-card.sel { box-shadow: 0 0 0 1px var(--amber-2); }