fix: chromium/webkit card fix, tooltip warning

messages/uwu.json

@@ -177,7 +177,7 @@
 	"navbar": {
 		"upload": "Upwoad",
 		"convert": "Conwewt",
-		"settings": "Settings", 
+		"settings": "Settings",
 		"about": "About",
 		"toggle_theme": "Toggwe theme"
 	},

src/lib/components/visual/Tooltip.svelte

@@ -55,7 +55,7 @@
 	}
 </script>
 
-<div
+<span
 	bind:this={triggerElement}
 	class="relative inline-block {className}"
 	onmouseenter={show}
@@ -67,10 +67,10 @@
 	role="tooltip"
 >
 	{@render children()}
-</div>
+</span>
 
 {#if showTooltip}
-	<div
+	<span
 		class="tooltip tooltip-{position}"
 		style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
 		transition:fade={{
@@ -78,7 +78,7 @@
 		}}
 	>
 		{text}
-	</div>
+	</span>
 {/if}
 
 <style>

src/routes/+page.svelte

@@ -78,16 +78,35 @@
 	// svelte-ignore state_referenced_locally
 	let showBlur = $state(Array(Object.keys(status).length).fill(false));
 
-	const checkScrollable = (index: number) => {
-		const container = scrollContainers[index];
-		if (!container) return;
-		showBlur[index] = container.scrollHeight > container.clientHeight;
-	};
-
 	onMount(() => {
+		const isFirefox = /firefox/i.test(navigator.userAgent);
+
 		const handleResize = () => {
-			for (let i = 0; i < scrollContainers.length; i++)
-				checkScrollable(i);
+			for (let i = 0; i < scrollContainers.length; i++) {
+				// show bottom blur if scrollable
+				const container = scrollContainers[i];
+				if (!container) return;
+				showBlur[i] = container.scrollHeight > container.clientHeight;
+
+				// if not on firefox, add ml-2 to card content if scrollable
+				// doing this because i can't figure out how to make the scrollbar *not* take up DOM space (shifting the contents to the left)
+				if (!isFirefox && scrollContainers[i]) {
+					const card = scrollContainers[i].closest(
+						".file-category-card",
+					);
+					const cardContent = card?.querySelector(
+						".file-category-card-content",
+					);
+					if (cardContent) {
+						const hasML2 = cardContent.classList.contains("ml-2");
+						if (showBlur[i] && !hasML2) {
+							cardContent.classList.add("ml-2");
+						} else if (!showBlur[i] && hasML2) {
+							cardContent.classList.remove("ml-2");
+						}
+					}
+				}
+			}
 		};
 
 		handleResize();