feat: use overlayscrollbars for cards

finally no more shifting on chromium

bun.lock

@@ -17,6 +17,8 @@
         "clsx": "^2.1.1",
         "lucide-svelte": "^0.475.0",
         "music-metadata": "^11.0.0",
+        "overlayscrollbars": "^2.11.5",
+        "overlayscrollbars-svelte": "^0.5.5",
         "p-queue": "^8.1.0",
         "riff-file": "^1.0.3",
         "svelte-stripe": "^1.4.0",
@@ -641,6 +643,10 @@
 
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
+    "overlayscrollbars": ["overlayscrollbars@2.11.5", "", {}, "sha512-vTUfCtjJbTjiarrxl9qdK04ZxlQdB4ugXfiqctVZytYDXH259OM4whROMGDE6T8uCYmSYPqiOFIKZ1erVkJnFg=="],
+
+    "overlayscrollbars-svelte": ["overlayscrollbars-svelte@0.5.5", "", { "peerDependencies": { "overlayscrollbars": "^2.0.0", "svelte": "^5.0.0" } }, "sha512-+dRW3YZSvFbKi5vDCpnUOHuoPLLSdu0BUVVMYZdmfVghu7XkafDRebG2y91/ImPqj6YDAUsz1rcWVYhCJSS/pQ=="],
+
     "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
 
     "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],

package.json

@@ -50,6 +50,8 @@
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.475.0",
 		"music-metadata": "^11.0.0",
+		"overlayscrollbars": "^2.11.5",
+		"overlayscrollbars-svelte": "^0.5.5",
 		"p-queue": "^8.1.0",
 		"riff-file": "^1.0.3",
 		"svelte-stripe": "^1.4.0",

src/lib/css/app.scss

@@ -335,44 +335,6 @@ body {
 	@apply bg-accent-purple !text-black;
 }
 
-// firefox
-* {
-	scrollbar-width: thin;
-	scrollbar-color: var(--bg-separator) transparent;
-}
-
-// other browsers
-*::-webkit-scrollbar {
-	width: 6px;
-	height: 6px;
-}
-
-*::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-	background-color: var(--bg-separator);
-	border-radius: 3px;
-	border: none;
-	opacity: 0.7;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-	background-color: var(--bg-separator);
-	opacity: 1;
-}
-
-*::-webkit-scrollbar-corner {
-	background: transparent;
-}
-
-*::-webkit-scrollbar-button {
-	display: none;
-	width: 0;
-	height: 0;
-}
-
 @layer components {
 	select {
 		@apply appearance-none;

src/routes/+layout.svelte

@@ -16,7 +16,6 @@
 		dropping,
 		vertdLoaded,
 		locale,
-		updateLocale,
 	} from "$lib/store/index.svelte";
 	import "$lib/css/app.scss";
 	import { browser } from "$app/environment";

src/routes/+page.svelte

@@ -2,11 +2,13 @@
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import Tooltip from "$lib/components/visual/Tooltip.svelte";
 	import { converters } from "$lib/converters";
-	import { theme, vertdLoaded } from "$lib/store/index.svelte";
+	import { vertdLoaded } from "$lib/store/index.svelte";
 	import clsx from "clsx";
 	import { AudioLines, BookText, Check, Film, Image } from "lucide-svelte";
 	import { m } from "$lib/paraglide/messages";
-	import { link } from "$lib/store/index.svelte";
+	import { OverlayScrollbarsComponent } from "overlayscrollbars-svelte";
+	import { browser } from "$app/environment";
+	import "overlayscrollbars/overlayscrollbars.css";
 	import { onMount } from "svelte";
 
 	const getSupportedFormats = (name: string) =>
@@ -79,33 +81,12 @@
 	let showBlur = $state(Array(Object.keys(status).length).fill(false));
 
 	onMount(() => {
-		const isFirefox = /firefox/i.test(navigator.userAgent);
-
 		const handleResize = () => {
 			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");
-						}
-					}
-				}
 			}
 		};
 
@@ -147,6 +128,7 @@
 		<h2 class="text-center text-4xl">{m["upload.cards.title"]()}</h2>
 
 		<div class="flex gap-4 mt-8 md:flex-row flex-col">
+			{#if browser}
 				{#each Object.entries(status) as [key, s], i}
 					{@const Icon = s.icon}
 					<div class="file-category-card w-full flex flex-col gap-4">
@@ -164,12 +146,22 @@
 							<span>{s.title}</span>
 						</div>
 
-					<div class="file-category-card-content flex-grow relative">
 						<div
-							class="h-[12.25rem] overflow-y-auto overflow-x-hidden"
+							class="file-category-card-content flex-grow relative"
+						>
+							<OverlayScrollbarsComponent
+								options={{
+									scrollbars: {
+										autoHide: "move",
+										autoHideDelay: 1500,
+									},
+								}}
+								defer
+							>
+								<div
+									class="flex flex-col gap-4 h-[12.25rem]"
 									bind:this={scrollContainers[i]}
 								>
-							<div class="flex flex-col gap-4">
 									{#if key === "Video"}
 										<p
 											class="flex tems-center justify-center gap-2"
@@ -202,13 +194,17 @@
 											class="flex tems-center justify-center gap-2"
 										>
 											<Check size="20" />
-										{m["upload.cards.local_supported"]()}
+											{m[
+												"upload.cards.local_supported"
+											]()}
 										</p>
 									{/if}
 									<p>
 										{@html m["upload.cards.status.text"]({
 											status: s.ready
-											? m["upload.cards.status.ready"]()
+												? m[
+														"upload.cards.status.ready"
+													]()
 												: m[
 														"upload.cards.status.not_ready"
 													](),
@@ -253,8 +249,6 @@
 											{/each}
 										</p>
 									</div>
-							</div>
-						</div>
 									<!-- blur at bottom if scrollable -->
 									{#if showBlur[i]}
 										<div
@@ -263,8 +257,11 @@
 										></div>
 									{/if}
 								</div>
+							</OverlayScrollbarsComponent>
+						</div>
 					</div>
 				{/each}
+			{/if}
 		</div>
 	</div>
 </div>