From 408f729976a9ba45b25cf7d905335d3367974ebb Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 2 Dec 2025 11:32:04 -0800
Subject: [PATCH] switch modal results grid to flexbox for better layout

Use flexbox with fixed-width cards (70px) instead of CSS Grid. This
prevents excessive vertical spacing when using tall aspect ratio items.
---
 src/lib/components/collection/AddToCollectionModal.svelte    | 4 ++--
 src/lib/components/collection/SelectableCharacterCard.svelte | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/collection/AddToCollectionModal.svelte b/src/lib/components/collection/AddToCollectionModal.svelte
index e9a66aa2..9a8a4dd7 100644
--- a/src/lib/components/collection/AddToCollectionModal.svelte
+++ b/src/lib/components/collection/AddToCollectionModal.svelte
@@ -366,8 +366,8 @@
 	}
 
 	.results-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+		display: flex;
+		flex-wrap: wrap;
 		gap: $unit;
 		padding: $unit 0;
 	}
diff --git a/src/lib/components/collection/SelectableCharacterCard.svelte b/src/lib/components/collection/SelectableCharacterCard.svelte
index cdf6b844..93648e8a 100644
--- a/src/lib/components/collection/SelectableCharacterCard.svelte
+++ b/src/lib/components/collection/SelectableCharacterCard.svelte
@@ -57,7 +57,7 @@
 
 	.card {
 		position: relative;
-		width: 100%;
+		width: 70px;
 		@include rep.aspect(rep.$char-cell-w, rep.$char-cell-h);
 		padding: 0;
 		border: 2px solid transparent;
@@ -65,6 +65,7 @@
 		background: var(--card-bg, #f5f5f5);
 		cursor: pointer;
 		overflow: hidden;
+		flex-shrink: 0;
 		@include smooth-transition(0.15s, all);
 
 		&:hover {