From 0d9d621cae7ecb798d7f368ffd6a9415233a40aa Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 8 Apr 2026 14:26:32 -0400
Subject: [PATCH] fix positions of sidenotes + bump width

---
 components/Footnotes/FootnoteSection.tsx          | 2 +-
 components/Footnotes/FootnoteSideColumnLayout.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

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 (
-    <FootnoteSectionLayout className={props.hiddenOnDesktop ? "lg:hidden" : ""}>
+    <FootnoteSectionLayout className={props.hiddenOnDesktop ? "xl:hidden" : ""}>
       {footnotes.map((fn) => (
         <FootnoteEditor
           key={fn.footnoteEntityID}
diff --git a/components/Footnotes/FootnoteSideColumnLayout.tsx b/components/Footnotes/FootnoteSideColumnLayout.tsx
index 71411589..2d729651 100644
--- a/components/Footnotes/FootnoteSideColumnLayout.tsx
+++ b/components/Footnotes/FootnoteSideColumnLayout.tsx
@@ -34,7 +34,7 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(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<T extends FootnoteSideItem>(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<T extends FootnoteSideItem>(props: {
   return (
     <div
       ref={containerRef}
-      className={`footnote-side-column hidden lg:block absolute top-0 w-[200px] ${
+      className={`footnote-side-column hidden lg:block absolute top-0 w-[250px] ${
         props.fullPageScroll
           ? "left-[calc(50%+var(--page-width-units)/2+12px)]"
           : "left-full ml-3"
-- 
2.51.2