Fix table of contents highlighting glitch (#1459)

withastro · Feb 5, 2024 · 9a8e0ec · 9a8e0ec
1 parent 5d2a5a7
commit 9a8e0ec
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/sharp-cows-buy.md b/.changeset/sharp-cows-buy.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes a bug where table of contents highlighting could break given very specific combinations of content and viewport size
diff --git a/packages/starlight/components/TableOfContents/starlight-toc.ts b/packages/starlight/components/TableOfContents/starlight-toc.ts
@@ -95,8 +95,8 @@ export class StarlightTOC extends HTMLElement {
 		const mobileTocHeight = this.querySelector('summary')?.getBoundingClientRect().height || 0;
 		/** Start intersections at nav height + 2rem padding. */
 		const top = navBarHeight + mobileTocHeight + 32;
-		/** End intersections 1.5rem later. */
-		const bottom = top + 24;
+		/** End intersections `53px` later. This is slightly more than the maximum `margin-top` in Markdown content. */
+		const bottom = top + 53;
 		const height = document.documentElement.clientHeight;
 		return `-${top}px 0% ${bottom - height}px`;
 	}