From 7608b189faf5c60347d2cff6e8da1d37aaaa4030 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 19 Dec 2025 12:26:55 -0800
Subject: [PATCH] allow collection card names to wrap to 2 lines

---
 .../collection/CollectionArtifactCard.svelte        |  8 +++++++-
 .../collection/CollectionCharacterCard.svelte       | 13 ++++++++++++-
 .../collection/CollectionSummonCard.svelte          |  8 +++++++-
 .../collection/CollectionWeaponCard.svelte          |  8 +++++++-
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/collection/CollectionArtifactCard.svelte b/src/lib/components/collection/CollectionArtifactCard.svelte
index b77e516f..4b142de2 100644
--- a/src/lib/components/collection/CollectionArtifactCard.svelte
+++ b/src/lib/components/collection/CollectionArtifactCard.svelte
@@ -125,13 +125,19 @@
 	}
 
 	.artifact-name {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
 		font-size: $font-small;
+		line-height: 1.4;
 		color: var(--text-tertiary);
 		text-align: center;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		white-space: nowrap;
+		white-space: normal;
+		word-break: break-word;
 		max-width: 139px;
+		min-height: calc($font-small * 1.4 * 2);
 
 		&.nickname {
 			font-weight: $bold;
diff --git a/src/lib/components/collection/CollectionCharacterCard.svelte b/src/lib/components/collection/CollectionCharacterCard.svelte
index 4812fb5b..ddc54266 100644
--- a/src/lib/components/collection/CollectionCharacterCard.svelte
+++ b/src/lib/components/collection/CollectionCharacterCard.svelte
@@ -2,6 +2,7 @@
 	import type { CollectionCharacter } from '$lib/types/api/collection'
 	import { getCharacterImageWithPose } from '$lib/utils/images'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
+	import CharacterTags from '$lib/components/tags/CharacterTags.svelte'
 	import perpetuityFilled from '$src/assets/icons/perpetuity/filled.svg'
 
 	interface Props {
@@ -50,6 +51,9 @@
 		transcendence={!character.character?.special && character.character?.uncap?.ulb}
 	/>
 	<span class="character-name">{displayName}</span>
+	{#if character.character}
+		<CharacterTags character={character.character} />
+	{/if}
 </button>
 
 <style lang="scss">
@@ -61,6 +65,7 @@
 		flex-direction: column;
 		align-items: center;
 		gap: $unit-half;
+		width: 100%;
 		padding: 0;
 		border: none;
 		background: transparent;
@@ -104,12 +109,18 @@
 	}
 
 	.character-name {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
 		font-size: typography.$font-small;
+		line-height: 1.4;
 		color: var(--text-tertiary);
 		text-align: center;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		white-space: nowrap;
+		white-space: normal;
+		word-break: break-word;
 		max-width: 100%;
+		max-height: calc(typography.$font-small * 1.4 * 2);
 	}
 </style>
diff --git a/src/lib/components/collection/CollectionSummonCard.svelte b/src/lib/components/collection/CollectionSummonCard.svelte
index 307f402c..0f4ea02e 100644
--- a/src/lib/components/collection/CollectionSummonCard.svelte
+++ b/src/lib/components/collection/CollectionSummonCard.svelte
@@ -80,12 +80,18 @@
 	}
 
 	.summon-name {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
 		font-size: typography.$font-small;
+		line-height: 1.4;
 		color: var(--text-tertiary);
 		text-align: center;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		white-space: nowrap;
+		white-space: normal;
+		word-break: break-word;
 		max-width: 100%;
+		min-height: calc(typography.$font-small * 1.4 * 2);
 	}
 </style>
diff --git a/src/lib/components/collection/CollectionWeaponCard.svelte b/src/lib/components/collection/CollectionWeaponCard.svelte
index 97c08d3c..fe6f7963 100644
--- a/src/lib/components/collection/CollectionWeaponCard.svelte
+++ b/src/lib/components/collection/CollectionWeaponCard.svelte
@@ -106,12 +106,18 @@
 	}
 
 	.weapon-name {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
 		font-size: typography.$font-small;
+		line-height: 1.4;
 		color: var(--text-tertiary);
 		text-align: center;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		white-space: nowrap;
+		white-space: normal;
+		word-break: break-word;
 		max-width: 100%;
+		min-height: calc(typography.$font-small * 1.4 * 2);
 	}
 </style>