From cf294b9d30ff0e0c41a50dc3237f989b33a80929 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 11 Oct 2024 14:11:36 -0400
Subject: [PATCH] fix scroll-margin

---
 packages/site-kit/src/lib/components/Text.svelte | 10 ++++++++--
 packages/site-kit/src/lib/markdown/renderer.ts   |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 39298e5f61..c42752c328 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -75,14 +75,20 @@
 		h2,
 		h3 {
 			max-width: 100%;
-			text-overflow: ellipsis;
-			overflow: hidden;
 			padding: 0 1em 0 0;
 
 			@media (min-width: 768px) {
 				margin: 0 0 0 -2em;
 				padding: 0 1em 0 2em;
 			}
+
+			/* we can't use `text-overflow` on the heading itself,
+			   because `overflow: hidden` defeats `scroll-margin` */
+			& > span {
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 		}
 
 		h2 {
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 125efae7a2..c166e3d295 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -269,10 +269,10 @@ export async function render_content_markdown(
 			headings[depth - 1] = slugify(raw);
 			headings.length = depth;
 			const slug = headings.filter(Boolean).join('-');
-			return `<h${depth} id="${slug}">${text.replace(
+			return `<h${depth} id="${slug}"><span>${text.replace(
 				/<\/?code>/g,
 				''
-			)}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${depth}>`;
+			)}</span><a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${depth}>`;
 		},
 		code({ text }) {
 			return snippets.get(text);