granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

switch modal results grid to flexbox for better layout

Browse source 
Use flexbox with fixed-width cards (70px) instead of CSS Grid. This
prevents excessive vertical spacing when using tall aspect ratio items.
This commit is contained in:
Justin Edmund 2025-12-02 11:32:04 -08:00
parent 7de75ec8d0
commit 408f729976
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/collection/AddToCollectionModal.svelte
View file

@ -366,8 +366,8 @@
} }
.results-grid { .results-grid {
display: grid; display: flex;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); flex-wrap: wrap;
gap: $unit; gap: $unit;
padding: $unit 0; padding: $unit 0;
} }

3
src/lib/components/collection/SelectableCharacterCard.svelte
View file

@ -57,7 +57,7 @@
.card { .card {
position: relative; position: relative;
width: 100%; width: 70px;
@include rep.aspect(rep.$char-cell-w, rep.$char-cell-h); @include rep.aspect(rep.$char-cell-w, rep.$char-cell-h);
padding: 0; padding: 0;
border: 2px solid transparent; border: 2px solid transparent;
@ -65,6 +65,7 @@
background: var(--card-bg, #f5f5f5); background: var(--card-bg, #f5f5f5);
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
flex-shrink: 0;
@include smooth-transition(0.15s, all); @include smooth-transition(0.15s, all);
&:hover { &:hover {