Merge #116: remove vertical scroll bar

5078729 Applied changes from TGlide's PR consistently across the website (TGlide)
59a10b8 remove PagesWrapper 100vh, make Toc sticky on desktop up (Graeme Byrne)
a39f573 remove vertical scroll bar (Graeme Byrne)

Pull request description:

  * Remove vertical scroll bar on all `routes/(pages)` as mentioned [here](#113 (review)) using the following:

  ```
  .content-preview {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 0rem;
  }
  ```
  * Edit lists on all `routes/(pages)` to ensure style consistency.

ACKs for top commit:
  josecelano:
    ACK 5078729

Tree-SHA512: df3e02cded2f2b4a36a0cf542051c05f8aff21ded49d607ab33c6434f21fa01198d160200086adc6b9e4a9660b2a629f4d010892fe17e6832c1caae62ed3628a

Author: josecelano

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

src/lib/components/atoms/PagesWrapper.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/Toc.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>