From 0b7201779c03a1fcb170cb637bc475d1e578a074 Mon Sep 17 00:00:00 2001
From: Branden J Brown <zephyrtronium@gmail.com>
Date: Fri, 29 May 2026 14:57:48 -0400
Subject: [PATCH] zenno: use spans for skill tooltips

---
 zenno/src/lib/Skill.svelte | 44 +++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/zenno/src/lib/Skill.svelte b/zenno/src/lib/Skill.svelte
index 402d0ca..b8da408 100644
--- a/zenno/src/lib/Skill.svelte
+++ b/zenno/src/lib/Skill.svelte
@@ -36,62 +36,62 @@
 		}
 		return l[0];
 	});
-	const activationClass = $derived(s.activations.length === 1 ? null : 'my-2 border rounded-md');
+	const activationClass = $derived(s.activations.length === 1 ? null : 'block my-2 border rounded-md');
 
 	const spanClass = $derived(mention ? 'italic' : 'font-bold');
 </script>
 
 {#snippet condition(disj: string[])}
 	{#each disj as conj, i (conj)}
-		<div class="font-mono text-sm">{conj}</div>
+		<span class="-mb-1 block font-mono text-sm">{conj}</span>
 		{#if i !== disj.length - 1}
-			<div class="text-xs italic">or</div>
+			<span class="text-xs italic">or</span>
 		{/if}
 	{/each}
 {/snippet}
 
 {#snippet abilities(abils: Ability[])}
 	{#each abils as a, i (i)}
-		<div class="text-sm">
+		<span class="block text-sm">
 			{ABILITY_TYPE_FORMAT[a.type](a.value)}
 			{ABILITY_SCALE_NAME[a.value_usage]}
 			{#if a.target && a.target !== Target.Self}
 				{TARGET_FORMAT[a.target](a.target_value)}
 			{/if}
-		</div>
+		</span>
 	{/each}
 {/snippet}
 
-<span class="group relative inline-block">
-	<div
+<span class="group relative inline-block hyphens-none">
+	<span
 		class="skill-tip invisible absolute bottom-4 -left-1/2 flex w-80 flex-col rounded-lg border px-2 text-center opacity-0 shadow-lg transition-all group-hover:visible group-hover:bottom-6 group-hover:opacity-100"
 		role="tooltip"
 	>
-		<div class="border-b py-1">
+		<span class="block border-b py-1 hyphens-auto">
 			{s.description}
-		</div>
+		</span>
 		{#each s.activations as act, i (i)}
-			<div class={activationClass}>
+			<span class={activationClass}>
 				{#if act.precondition}
-					<div class="border-b py-1">
-						<div class="text-xs italic">Precondition</div>
+					<span class="block border-b py-1">
+						<span class="text-xs italic">Precondition</span>
 						{@render condition(splitCond(act.precondition))}
-					</div>
+					</span>
 				{/if}
-				<div class="border-b py-1">
+				<span class="block border-b py-1">
 					{@render condition(splitCond(act.condition))}
-				</div>
-				<div class="py-1">
+				</span>
+				<span class="block py-1">
 					{@render abilities(act.abilities)}
 					{#if act.duration != null && act.duration > 0}
-						<div class="text-sm">
+						<span class="block text-sm">
 							for {tenThousandths(act.duration)}s
 							{DURATION_SCALE_NAME[act.dur_scale]}
-						</div>
+						</span>
 					{/if}
-				</div>
-			</div>
+				</span>
+			</span>
 		{/each}
-	</div>
-	<span class={spanClass}>{s.name}</span>
+	</span>
+	<span class={[spanClass, 'cursor-pointer']}>{s.name}</span>
 </span>