remove vertical scroll bar

package.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",

src/lib/components/atoms/PagesWrapper.svelte

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

src/lib/components/atoms/Toc.svelte

@@ -1,59 +1,57 @@
 <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 class="lg:overflow-y-auto rounded-lg text-white">
+<div class="lg:overflow-y-auto rounded-lg text-white {classes}">
 	<nav>
 		{#key $headingsTree}
 			<Tree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} />
 		{/key}
 	</nav>
 </div>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	@include for-desktop-up {
+		nav {
+			position: sticky;
+			top: 0;
+			z-index: 100;
+			background-color: inherit;
+		}
+	}
+</style>

src/lib/components/atoms/Tree.svelte

@@ -15,13 +15,11 @@
 					href="#{heading.id}"
 					use:melt={$item(heading.id)}
 					class="inline-flex items-center justify-center gap-1 text-white no-underline transition-colors
-             hover:text-[rgba(255,_49,_0,_1)] data-[active]:text-[rgba(255,_49,_0,_1)]"
+             hover:text-[rgba(255,_49,_0,_1)] data-[active]:text-[rgba(255,_49,_0,_1)] break-keep"
 				>
-					<!--
-              Along with the heading title, the original heading node
+					<!-- Along with the heading title, the original heading node
               is also passed down, so you can display headings
-              however you want.
-            -->
+              however you want. -->
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					{@html heading.node.innerHTML}
 				</a>
@@ -32,9 +30,3 @@
 		{/each}
 	{/if}
 </ul>
-
-<style>
-	a {
-		word-break: keep-all;
-	}
-</style>