Applied changes from TGlide's PR consistently across the website

Author: grmbyrn

package-lock.json

@@ -54,6 +54,7 @@
 	"dependencies": {
 		"@fontsource-variable/roboto-mono": "^5.0.19",
 		"@fontsource-variable/roboto-slab": "^5.0.20",
+		"@sveltejs/vite-plugin-svelte": "^3.1.2",
 		"@tailwindcss/typography": "^0.5.15",
 		"autoprefixer": "^10.4.20",
 		"feather-icons": "^4.29.2",

package.json

@@ -36,6 +36,7 @@
 
 	@include for-desktop-up {
 		.layout {
+			height: 100%;
 			flex-direction: row;
 			gap: 4rem;
 		}

src/lib/components/atoms/PagesWrapper.svelte

@@ -1,56 +1,41 @@
 <script lang="ts">
-	import { onMount } from 'svelte'; // ✨ Import Svelte onMount
 	import Tree from './Tree.svelte';
 	import { createTableOfContents } from '@melt-ui/svelte';
 	import { pushState } from '$app/navigation';
 
-	let isMobileScreen = false;
-
-	onMount(() => {
-		isMobileScreen = window.innerWidth <= 1200;
-
-		const handleResize = () => {
-			isMobileScreen = window.innerWidth <= 1024;
-		};
-		window.addEventListener('resize', handleResize);
-		return () => window.removeEventListener('resize', handleResize); // ✨ Clean up
-	});
+	let classes: string;
+	export { classes as class };
+	export let selector = '#toc-contents';
 
 	const {
 		elements: { item },
 		states: { activeHeadingIdxs, headingsTree }
 	} = createTableOfContents({
-		selector: '#toc-builder-preview',
+		selector,
 		exclude: [],
 		activeType: 'highest',
 		pushStateFn: pushState,
 		headingFilterFn: (heading) => !heading.hasAttribute('data-toc-ignore'),
 
 		scrollFn: (id) => {
-			const container = document.getElementById('toc-builder-preview');
 			const element = document.getElementById(id);
 
-			if (container && element) {
-				const containerTopOffset = container.offsetTop;
-				const elementTopOffset = element.offsetTop;
-
-				if (isMobileScreen) {
-					element.scrollIntoView({
-						behavior: 'smooth',
-						block: 'start'
-					});
-				} else {
-					container.scrollTo({
-						top: elementTopOffset - containerTopOffset,
-						behavior: 'smooth'
-					});
-				}
-			}
+			if (!element) return;
+			const prevScrollMargin = element.style.scrollMarginTop;
+			element.style.scrollMarginTop = '16px';
+
+			// trigger reflow
+			getComputedStyle(element);
+			element?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start'
+			});
+			element.style.scrollMarginTop = prevScrollMargin;
 		}
 	});
 </script>
 
-<div>
+<div class="lg:overflow-y-auto rounded-lg text-white {classes}">
 	<nav>
 		{#key $headingsTree}
 			<Tree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} />