From 416eed8e486f9421d11226e900daf14ddaca2649 Mon Sep 17 00:00:00 2001
From: Maya <jovannmc@femboyfurry.net>
Date: Tue, 2 Sep 2025 21:06:39 +0800
Subject: [PATCH] fix: blur and tooltip fixes

tooltip appends to body to fix overflow issues, fix scroll
---
 src/lib/components/visual/Tooltip.svelte | 15 ++++++++++++++-
 src/routes/+page.svelte                  | 22 +++++++++++-----------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/visual/Tooltip.svelte b/src/lib/components/visual/Tooltip.svelte
index ba2269d..ae8f9da 100644
--- a/src/lib/components/visual/Tooltip.svelte
+++ b/src/lib/components/visual/Tooltip.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { fade } from "$lib/animation";
-
 	interface Props {
 		children: () => any;
 		text: string;
@@ -12,6 +11,7 @@
 	let showTooltip = $state(false);
 	let timeout: number = 0;
 	let triggerElement: HTMLElement;
+	let tooltipElement = $state<HTMLElement>();
 	let tooltipPosition = $state({ x: 0, y: 0 });
 
 	function show() {
@@ -53,6 +53,18 @@
 		showTooltip = false;
 		clearTimeout(timeout);
 	}
+
+	$effect(() => {
+		if (showTooltip && tooltipElement) {
+			document.body.appendChild(tooltipElement);
+		}
+
+		return () => {
+			if (tooltipElement && tooltipElement.parentNode === document.body) {
+				document.body.removeChild(tooltipElement);
+			}
+		};
+	});
 </script>
 
 <span
@@ -71,6 +83,7 @@
 
 {#if showTooltip}
 	<span
+		bind:this={tooltipElement}
 		class="tooltip tooltip-{position}"
 		style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
 		transition:fade={{
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3c56f9e..d81fc4d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -76,7 +76,7 @@
 		return "";
 	};
 
-	let scrollContainers: HTMLElement[] = [];
+	let scrollContainers: HTMLElement[] = $state([]);
 	// svelte-ignore state_referenced_locally
 	let showBlur = $state(Array(Object.keys(status).length).fill(false));
 
@@ -159,7 +159,7 @@
 								defer
 							>
 								<div
-									class="flex flex-col gap-4 h-[12.25rem]"
+									class="flex flex-col gap-4 h-[12.25rem] relative"
 									bind:this={scrollContainers[i]}
 								>
 									{#if key === "Video"}
@@ -210,7 +210,7 @@
 													](),
 										})}
 									</p>
-									<div class="flex flex-col items-center">
+									<div class="flex flex-col items-center relative">
 										<b
 											>{m[
 												"upload.cards.supported_formats"
@@ -226,7 +226,7 @@
 													? format.slice(0, -1)
 													: format}
 												<span
-													class="text-sm font-normal flex items-center"
+													class="text-sm font-normal flex items-center relative"
 												>
 													{#if isPartial}
 														<Tooltip
@@ -249,15 +249,15 @@
 											{/each}
 										</p>
 									</div>
-									<!-- blur at bottom if scrollable -->
-									{#if showBlur[i]}
-										<div
-											class="absolute left-0 bottom-0 w-full h-10 pointer-events-none"
-											style={`background: linear-gradient(to top, var(--bg-panel), transparent 100%);`}
-										></div>
-									{/if}
 								</div>
 							</OverlayScrollbarsComponent>
+							<!-- blur at bottom if scrollable - positioned relative to the card container -->
+							{#if showBlur[i]}
+								<div
+									class="absolute left-0 bottom-0 w-full h-10 pointer-events-none"
+									style={`background: linear-gradient(to top, var(--bg-panel), transparent 100%);`}
+								></div>
+							{/if}
 						</div>
 					</div>
 				{/each}