From 8646a494f4066a8857689c11747626ffb48a1456 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 16 Dec 2025 17:04:43 -0800
Subject: [PATCH] truncate long names in database cells

---
 .../database/cells/CharacterNameCell.svelte   |  6 ++-
 .../database/cells/SummonNameCell.svelte      | 43 +++++++++++++++++++
 .../database/cells/WeaponNameCell.svelte      | 43 +++++++++++++++++++
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/database/cells/SummonNameCell.svelte
 create mode 100644 src/lib/components/database/cells/WeaponNameCell.svelte

diff --git a/src/lib/components/database/cells/CharacterNameCell.svelte b/src/lib/components/database/cells/CharacterNameCell.svelte
index c621f20f..72060a70 100644
--- a/src/lib/components/database/cells/CharacterNameCell.svelte
+++ b/src/lib/components/database/cells/CharacterNameCell.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <div class="name-cell">
-	<span class="name">{displayName}</span>
+	<span class="name" title={displayName}>{displayName}</span>
 	<CharacterTags {character} />
 </div>
 
@@ -33,9 +33,13 @@
 		flex-direction: column;
 		gap: $unit-half;
 		padding: $unit-half 0;
+		min-width: 0;
 	}
 
 	.name {
 		font-weight: $medium;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 </style>
diff --git a/src/lib/components/database/cells/SummonNameCell.svelte b/src/lib/components/database/cells/SummonNameCell.svelte
new file mode 100644
index 00000000..ad86905f
--- /dev/null
+++ b/src/lib/components/database/cells/SummonNameCell.svelte
@@ -0,0 +1,43 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Cell } from 'wx-svelte-grid'
+	import type { Summon } from '$lib/types/api/entities'
+
+	const { row }: Cell = $props()
+
+	// Cast row to Summon type for type safety
+	const summon = row as Summon
+
+	// Get display name
+	const displayName = $derived.by(() => {
+		const nameObj = summon.name
+		if (!nameObj) return '—'
+		if (typeof nameObj === 'string') return nameObj
+		return nameObj.en || nameObj.ja || '—'
+	})
+</script>
+
+<div class="name-cell">
+	<span class="name" title={displayName}>{displayName}</span>
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/typography' as *;
+
+	.name-cell {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+		padding: $unit-half 0;
+		min-width: 0;
+	}
+
+	.name {
+		font-weight: $medium;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>
diff --git a/src/lib/components/database/cells/WeaponNameCell.svelte b/src/lib/components/database/cells/WeaponNameCell.svelte
new file mode 100644
index 00000000..aaf2ff62
--- /dev/null
+++ b/src/lib/components/database/cells/WeaponNameCell.svelte
@@ -0,0 +1,43 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Cell } from 'wx-svelte-grid'
+	import type { Weapon } from '$lib/types/api/entities'
+
+	const { row }: Cell = $props()
+
+	// Cast row to Weapon type for type safety
+	const weapon = row as Weapon
+
+	// Get display name
+	const displayName = $derived.by(() => {
+		const nameObj = weapon.name
+		if (!nameObj) return '—'
+		if (typeof nameObj === 'string') return nameObj
+		return nameObj.en || nameObj.ja || '—'
+	})
+</script>
+
+<div class="name-cell">
+	<span class="name" title={displayName}>{displayName}</span>
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/typography' as *;
+
+	.name-cell {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+		padding: $unit-half 0;
+		min-width: 0;
+	}
+
+	.name {
+		font-weight: $medium;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>