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}
/>
{displayName}
+ {#if character.character}
+
+ {/if}
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);
}
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);
}