remove PagesWrapper 100vh, make Toc sticky on desktop up

Author: grmbyrn

src/lib/components/atoms/PagesWrapper.svelte

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

src/lib/components/atoms/Toc.svelte

@@ -50,10 +50,23 @@
 	});
 </script>
 
-<div class="lg:overflow-y-auto rounded-lg text-white">
+<div>
 	<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>

src/routes/(pages)/about/+page.svelte

@@ -337,6 +337,13 @@
 		padding-top: 2rem;
 	}
 
+	@include for-desktop-up {
+		.content-preview {
+			overflow-y: auto;
+			padding-top: 0rem;
+		}
+	}
+
 	#toc-builder-preview > h2 {
 		font-size: 1.8rem;
 		font-weight: bold;
@@ -371,7 +378,6 @@
 		margin: 0;
 		padding-left: 1.5rem;
 		word-break: keep-all;
-		padding-top: 1rem;
 	}
 
 	ul li {
@@ -393,13 +399,4 @@
 	img {
 		border-radius: 24px;
 	}
-
-	@include for-desktop-up {
-		.content-preview {
-			overflow-y: scroll;
-			scrollbar-width: none;
-			-ms-overflow-style: none;
-			padding-top: 0rem;
-		}
-	}
 </style>