diff --git a/components/Footnotes/FootnoteSection.tsx b/components/Footnotes/FootnoteSection.tsx index b230d150..ee11f088 100644 --- a/components/Footnotes/FootnoteSection.tsx +++ b/components/Footnotes/FootnoteSection.tsx @@ -13,7 +13,7 @@ export function FootnoteSection(props: { hiddenOnDesktop?: boolean }) { if (footnotes.length === 0) return null; return ( - + {footnotes.map((fn) => ( (props: { if (!scrollWrapper) return; let scrollTop = scrollWrapper.scrollTop; - let scrollWrapperRect = scrollWrapper.getBoundingClientRect(); + let containerRect = container.getBoundingClientRect(); // Sync scroll transform directly on the DOM (no React re-render) inner.style.transform = `translateY(-${scrollTop}px)`; @@ -48,7 +48,9 @@ export function FootnoteSideColumnLayout(props: { if (!supEl) continue; let supRect = supEl.getBoundingClientRect(); - let anchorTop = supRect.top - scrollWrapperRect.top + scrollTop; + // Position relative to the side column container (which is absolute top-0 in pageWrapper), + // offset by the item's padding so the text visually aligns with the anchor + let anchorTop = supRect.top - containerRect.top + scrollTop - 4; let itemEl = inner.querySelector( `[data-footnote-side-id="${item.id}"]`, @@ -144,7 +146,7 @@ export function FootnoteSideColumnLayout(props: { return (