From 581ef1bc6ac373fd0d24b25741add1f2bc59a72a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 2 Oct 2024 16:15:37 -0400
Subject: [PATCH 1/6] fix #109 and #137, hopefully

---
 .../routes/docs/[...path]/OnThisPage.svelte   | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 9a2914d038..fe82103713 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import type { Document } from '@sveltejs/site-kit';
+	import { tick } from 'svelte';
 
 	let { content, document }: { content: HTMLElement; document: Document } = $props();
 
 	let headings: NodeListOf<HTMLHeadingElement>;
 	let current = $state('');
+	let element: HTMLElement;
 
 	afterNavigate(() => {
 		current = location.hash.slice(1);
@@ -26,6 +28,14 @@
 				next.getBoundingClientRect().top > threshold
 			) {
 				current = heading.id;
+
+				tick().then(() => {
+					const active = element.querySelector('.active');
+					active?.scrollIntoView({
+						block: 'center'
+					});
+				});
+
 				break;
 			}
 		}
@@ -40,7 +50,7 @@
 		On this page
 	</label>
 
-	<nav>
+	<nav bind:this={element}>
 		<ul>
 			<li>
 				<a href="/{document.slug}" class:active={current === ''}>
@@ -146,12 +156,19 @@
 		}
 
 		@media (min-width: 1200px) {
+			width: calc(var(--sidebar-width) - var(--sk-page-padding-side));
+			padding: 0;
+			box-sizing: border-box;
 			position: fixed;
+			display: flex;
+			flex-direction: column;
 			top: 14rem;
-			right: 0;
-			width: var(--sidebar-width);
-			padding: 0 var(--sk-page-padding-side) 0 0;
-			box-sizing: border-box;
+			left: calc(
+				var(--sk-page-padding-side) + var(--sidebar-width) + var(--sk-line-max-width) +
+					var(--sk-page-padding-side)
+			);
+			height: calc(100vh - 20rem);
+			overflow: hidden;
 
 			input {
 				display: none;
@@ -170,6 +187,8 @@
 
 			nav {
 				display: block;
+				height: 100%;
+				overflow-y: auto;
 
 				li:first-child {
 					display: list-item;

From 3dd350eed02e83b3ba16d66876d7ece372128577 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 16:51:34 -0400
Subject: [PATCH 2/6] fix

---
 apps/svelte.dev/src/routes/_home/common.css                | 1 +
 .../svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 7 ++++---
 packages/site-kit/src/lib/components/Shell.svelte          | 1 -
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/common.css b/apps/svelte.dev/src/routes/_home/common.css
index ae7cc517a2..e2acbf5f2c 100644
--- a/apps/svelte.dev/src/routes/_home/common.css
+++ b/apps/svelte.dev/src/routes/_home/common.css
@@ -5,6 +5,7 @@
 .home {
 	--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));
 	--background-2: var(--sk-theme-2);
+	overflow-x: hidden;
 }
 
 .home .grid {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 5414764c6e..0c726461e8 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -25,7 +25,8 @@
 			if (
 				next &&
 				heading.getBoundingClientRect().top < threshold &&
-				next.getBoundingClientRect().top > threshold
+				next.getBoundingClientRect().top > threshold &&
+				current !== heading.id
 			) {
 				current = heading.id;
 
@@ -157,14 +158,13 @@
 		}
 
 		@media (min-width: 1200px) {
-			width: calc(var(--sidebar-width) - var(--sk-page-padding-side));
 			padding: 0;
 			box-sizing: border-box;
 			position: fixed;
 			display: flex;
 			flex-direction: column;
 			top: 14rem;
-			height: calc(100vh - 20rem);
+			height: calc(100vh - 14rem);
 			overflow: hidden;
 			left: calc(100dvw - var(--sidebar-width));
 			width: var(--sidebar-width);
@@ -189,6 +189,7 @@
 				display: block;
 				height: 100%;
 				overflow-y: auto;
+				scrollbar-width: none;
 
 				li:first-child {
 					display: list-item;
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
index db62e7b224..68f58feb33 100644
--- a/packages/site-kit/src/lib/components/Shell.svelte
+++ b/packages/site-kit/src/lib/components/Shell.svelte
@@ -75,7 +75,6 @@ The main shell of the application. It provides a slot for the top navigation, th
 		padding-top: var(--sk-nav-height);
 		padding-bottom: var(--sk-banner-bottom-height);
 		height: 100%;
-		overflow-x: hidden;
 	}
 
 	@media (max-width: 799px) {

From ab790e4b593bc675ae14e2098c05ab85eef51dd2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 16:55:43 -0400
Subject: [PATCH 3/6] fix

---
 .../src/routes/docs/[...path]/OnThisPage.svelte  | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 0c726461e8..051e1a3114 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import type { Document } from '@sveltejs/site-kit';
-	import { tick } from 'svelte';
 
 	let { content, document }: { content: HTMLElement; document: Document } = $props();
 
 	let headings: NodeListOf<HTMLHeadingElement>;
 	let current = $state('');
-	let element: HTMLElement;
 
 	afterNavigate(() => {
 		current = location.hash.slice(1);
@@ -25,18 +23,9 @@
 			if (
 				next &&
 				heading.getBoundingClientRect().top < threshold &&
-				next.getBoundingClientRect().top > threshold &&
-				current !== heading.id
+				next.getBoundingClientRect().top > threshold
 			) {
 				current = heading.id;
-
-				tick().then(() => {
-					const active = element.querySelector('.active');
-					active?.scrollIntoView({
-						block: 'center'
-					});
-				});
-
 				break;
 			}
 		}
@@ -51,7 +40,7 @@
 		On this page
 	</label>
 
-	<nav bind:this={element}>
+	<nav>
 		<ul>
 			<li>
 				<a href="/{document.slug}" class:active={current === ''}>
@@ -190,6 +179,7 @@
 				height: 100%;
 				overflow-y: auto;
 				scrollbar-width: none;
+				padding-bottom: var(--sk-page-padding-top);
 
 				li:first-child {
 					display: list-item;

From 3027385ad8d6b37c73d86e47c8fcf43330748fb1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 17:02:51 -0400
Subject: [PATCH 4/6] fixes

---
 .../src/routes/docs/[...path]/OnThisPage.svelte   |  5 ++---
 packages/site-kit/src/lib/components/Text.svelte  | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 051e1a3114..fce87e6e54 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -154,10 +154,8 @@
 			flex-direction: column;
 			top: 14rem;
 			height: calc(100vh - 14rem);
-			overflow: hidden;
 			left: calc(100dvw - var(--sidebar-width));
 			width: var(--sidebar-width);
-			padding: 0 var(--sk-page-padding-side) 0 0;
 			box-sizing: border-box;
 
 			input {
@@ -179,7 +177,8 @@
 				height: 100%;
 				overflow-y: auto;
 				scrollbar-width: none;
-				padding-bottom: var(--sk-page-padding-top);
+				margin-left: -1rem; /* negative margin avoids focus rings being cut off */
+				padding: 0 0 var(--sk-page-padding-top) 1rem;
 
 				li:first-child {
 					display: list-item;
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index bf40218f63..fb7597300f 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -53,6 +53,14 @@
 
 <style>
 	.text :global {
+		h2,
+		h3 {
+			max-width: 100%;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			padding-right: 1em;
+		}
+
 		h2 {
 			margin-top: 7rem;
 		}
@@ -289,9 +297,9 @@
 		a.permalink {
 			position: absolute !important;
 			display: block;
-			background: url(../icons/link.svg) 0 50% no-repeat;
+			background: url(../icons/link.svg) 50% 50% no-repeat;
 			background-size: 1em 1em;
-			width: 1.4em;
+			width: 1.2em;
 			height: 1.2em;
 			top: 0;
 
@@ -305,7 +313,8 @@
 				opacity: 0;
 				transition: opacity 0.2s;
 
-				:where(h2, h3):hover & {
+				:where(h2, h3):hover &,
+				&:focus {
 					opacity: 1;
 				}
 			}

From f05db173d9284fa7afc645a50645c7e2274a57fa Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 17:08:14 -0400
Subject: [PATCH 5/6] fix

---
 packages/site-kit/src/lib/components/Text.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index fb7597300f..a6ccc15930 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -58,7 +58,12 @@
 			max-width: 100%;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			padding-right: 1em;
+			padding: 0 1em 0 0;
+
+			@media (min-width: 768px) {
+				margin: 0 0 0 -2em;
+				padding: 0 1em 0 2em;
+			}
 		}
 
 		h2 {
@@ -300,8 +305,8 @@
 			background: url(../icons/link.svg) 50% 50% no-repeat;
 			background-size: 1em 1em;
 			width: 1.2em;
-			height: 1.2em;
-			top: 0;
+			height: 0.8em;
+			top: 0.2em;
 
 			@media (max-width: 767px) {
 				right: 0;
@@ -309,7 +314,7 @@
 			}
 
 			@media (min-width: 768px) {
-				left: -1.3em;
+				left: 0.7em;
 				opacity: 0;
 				transition: opacity 0.2s;
 

From a9d3a6692c41b23cbfd1ba779e96cd27cac35f1e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 17:10:14 -0400
Subject: [PATCH 6/6] tidy up

---
 apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index fce87e6e54..51e27b8c5b 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -147,8 +147,6 @@
 		}
 
 		@media (min-width: 1200px) {
-			padding: 0;
-			box-sizing: border-box;
 			position: fixed;
 			display: flex;
 			flex-direction: column;
@@ -174,7 +172,6 @@
 
 			nav {
 				display: block;
-				height: 100%;
 				overflow-y: auto;
 				scrollbar-width: none;
 				margin-left: -1rem; /* negative margin avoids focus rings being cut off */