fix scroll-margin (#346)

Author: Rich-Harris

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 {

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);