From 7737907cbb4db3095794b6c7cd0a502d7474032d Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 22 Apr 2024 06:48:01 -0700
Subject: feat(badges): use static y for tooltip

---
 src/routes/user/[user]/badges/+page.svelte | 98 +++++++++++++++---------------
 1 file changed, 50 insertions(+), 48 deletions(-)

(limited to 'src/routes/user')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 5dd2d554..d0c9e26b 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -831,60 +831,62 @@
 
 									<div class="badges">
 										{#each badges as badge}
-											{#if editMode}
-												<Tooltip
-													content={`${
-														badge.time
-															? $locale().dateFormatter(databaseTimeToDate(badge.time))
-															: ''
-													}${badge.description ? `\n${badge.description}` : ''}${
-														badge.designer ? `\nDesigner: ${badge.designer}` : ''
-													}${badge.source ? `\nSource: ${badge.source}` : ''}`}
-													id={`badge-${badge.id}`}
-													pin={`badge-${badge.id}`}
-													pinPosition="top"
-												>
-													<a
-														href={`#`}
-														on:click={() => {
-															selectedBadge = badge;
-
-															const hiddenInput = document.querySelector('input[name="hidden"]');
-
-															if (hiddenInput instanceof HTMLInputElement)
-																hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
-														}}
-														title={`${dev ? `${badge.id}\n` : ''}${
+											<div id={`badge-${badge.id}`}>
+												{#if editMode}
+													<Tooltip
+														content={`${
 															badge.time
 																? $locale().dateFormatter(databaseTimeToDate(badge.time))
 																: ''
-														}${badge.description ? `, ${badge.description}` : ''}${
+														}${badge.description ? `\n${badge.description}` : ''}${
 															badge.designer ? `\nDesigner: ${badge.designer}` : ''
 														}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+														pin={`badge-${badge.id}`}
+														pinPosition="top"
+														relative
 													>
-														<FallbackImage
-															source={cdn(thumbnail(badge.image))}
-															alternative={badge.description}
-															fallback={thumbnail(badge.image)}
-															style={badge.hidden || badge.shadow_hidden
-																? 'filter: grayscale(100%); opacity: 50%;'
-																: ''}
-														/>
-													</a>
-												</Tooltip>
-											{:else}
-												<FallbackBadge
-													{badge}
-													bind:selectedBadge
-													source={cdn(thumbnail(badge.image))}
-													alternative={badge.description}
-													fallback={thumbnail(badge.image)}
-													hideOnError={preferences.hide_missing_badges}
-													style={badge.hidden || badge.shadow_hidden
-														? 'filter: grayscale(100%); opacity: 50%;'
-														: ''}
-												/>
-											{/if}
+														<a
+															href={`#`}
+															on:click={() => {
+																selectedBadge = badge;
+
+																const hiddenInput = document.querySelector('input[name="hidden"]');
+
+																if (hiddenInput instanceof HTMLInputElement)
+																	hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
+															}}
+															title={`${dev ? `${badge.id}\n` : ''}${
+																badge.time
+																	? $locale().dateFormatter(databaseTimeToDate(badge.time))
+																	: ''
+															}${badge.description ? `, ${badge.description}` : ''}${
+																badge.designer ? `\nDesigner: ${badge.designer}` : ''
+															}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+														>
+															<FallbackImage
+																source={cdn(thumbnail(badge.image))}
+																alternative={badge.description}
+																fallback={thumbnail(badge.image)}
+																style={badge.hidden || badge.shadow_hidden
+																	? 'filter: grayscale(100%); opacity: 50%;'
+																	: ''}
+															/>
+														</a>
+													</Tooltip>
+												{:else}
+													<FallbackBadge
+														{badge}
+														bind:selectedBadge
+														source={cdn(thumbnail(badge.image))}
+														alternative={badge.description}
+														fallback={thumbnail(badge.image)}
+														hideOnError={preferences.hide_missing_badges}
+														style={badge.hidden || badge.shadow_hidden
+															? 'filter: grayscale(100%); opacity: 50%;'
+															: ''}
+													/>
+												{/if}
+											</div>
 										{/each}
 									</div>
 								</details>
-- 
cgit v1.2.3