fix character card aspect ratio and duplicate key error

- Use proper 16:33 aspect ratio for character cards instead of square
- Change object-fit from cover to contain to prevent cropping
- Deduplicate search results across pages to prevent duplicate key errors

src/lib/components/collection/AddToCollectionModal.svelte

@@ -82,10 +82,24 @@
 		enabled: open && !collectedIdsQuery.isLoading
 	}))
 
-	// Flatten results
-	const allResults = $derived(
-		searchResults.data?.pages.flatMap((page) => page.results) ?? []
-	)
+	// Flatten results and deduplicate by ID
+	// (API may return duplicates across pages)
+	const allResults = $derived.by(() => {
+		const pages = searchResults.data?.pages ?? []
+		const seen = new Set<string>()
+		const results: SearchResult[] = []
+
+		for (const page of pages) {
+			for (const result of page.results) {
+				if (!seen.has(result.id)) {
+					seen.add(result.id)
+					results.push(result)
+				}
+			}
+		}
+
+		return results
+	})
 
 	// Filter to show only selected if enabled
 	const displayedResults = $derived(

src/lib/components/collection/SelectableCharacterCard.svelte

@@ -53,11 +53,12 @@
 <style lang="scss">
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/effects' as *;
+	@use '$src/themes/rep' as rep;
 
 	.card {
 		position: relative;
-		width: 80px;
-		height: 80px;
+		width: 100%;
+		@include rep.aspect(rep.$char-cell-w, rep.$char-cell-h);
 		padding: 0;
 		border: 2px solid transparent;
 		border-radius: 8px;
@@ -85,7 +86,7 @@
 	.image {
 		width: 100%;
 		height: 100%;
-		object-fit: cover;
+		object-fit: contain;
 	}
 
 	.check-overlay {