From 7dd73ec1d837e6ff081673ad7a7fec3bd2fadb75 Mon Sep 17 00:00:00 2001
From: Rob B <computerguy440+gh@gmail.com>
Date: Sat, 6 Jan 2024 11:13:59 -0800
Subject: [PATCH] Tag patches (#148)

* fix: add spacing at the bottom of the tags collapse section to avoid paginator drawing over tooltips
(z index isn't helping for some reason)

* fix: remove forced period at end of tag descriptions

* chore: switch tag data binding to use tag id

* chore: fix hover-tags saying you should click on them in browser title-tooltip
---
 src/lib/components/mods/ModGrid.svelte     | 2 +-
 src/lib/components/utils/TagDisplay.svelte | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/mods/ModGrid.svelte b/src/lib/components/mods/ModGrid.svelte
index 400740ea8..b075fb953 100644
--- a/src/lib/components/mods/ModGrid.svelte
+++ b/src/lib/components/mods/ModGrid.svelte
@@ -153,7 +153,7 @@
         </div>
       </div>
       {#if tagsOpen}
-        <div class="flex flex-grow flex-row flex-wrap items-center justify-center gap-1">
+        <div class="flex flex-grow flex-row flex-wrap items-center justify-center gap-1 pb-10">
           {#if $allTags.error}
             <p>Oh no... {$allTags.error.message}</p>
           {:else if !$allTags.fetching}
diff --git a/src/lib/components/utils/TagDisplay.svelte b/src/lib/components/utils/TagDisplay.svelte
index 1edf81584..373d0e7a5 100644
--- a/src/lib/components/utils/TagDisplay.svelte
+++ b/src/lib/components/utils/TagDisplay.svelte
@@ -6,7 +6,7 @@
 
   $: popupHover = {
     event: popupTriggerEvent,
-    target: `popupHoverFor${tag.name}`,
+    target: `popupHoverFor${tag.id}`,
     placement: 'bottom-start'
   } satisfies PopupSettings;
 </script>
@@ -14,12 +14,13 @@
 <div
   class="lowercase text-neutral-300 [&>*]:pointer-events-none"
   use:popup={popupHover}
-  title="Click for tag information">
+  title={popupTriggerEvent === 'click' ? 'Click for tag information' : ''}>
   <span class="text-orange-500">#</span>{tag.name}
 </div>
 
 <!-- Must use high z-index to ensure it draws on top of things like striped compatibility overlays in mod cards -->
+<!-- For some reason this still isn't able to draw over the ModGrid paginator-->
 <!-- https://floating-ui.com/docs/misc#z-index-stacking -->
-<div class="card variant-filled-surface p-4" data-popup={`popupHoverFor${tag.name}`} style="z-index: 1000">
-  <p>{tag.description}.</p>
+<div class="card variant-filled-surface p-4" data-popup={`popupHoverFor${tag.id}`} style="z-index: 1000">
+  <p>{tag.description}</p>
 </div>