From 9a8e0ec59cba0e088512ea9b6d17224085f3a178 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Mon, 5 Feb 2024 22:08:36 +0100 Subject: [PATCH] Fix table of contents highlighting glitch (#1459) --- .changeset/sharp-cows-buy.md | 5 +++++ .../starlight/components/TableOfContents/starlight-toc.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/sharp-cows-buy.md diff --git a/.changeset/sharp-cows-buy.md b/.changeset/sharp-cows-buy.md new file mode 100644 index 00000000000..6f5ead13666 --- /dev/null +++ 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 index a5de15bd336..7a35ac3bba6 100644 --- 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`; }