a tool for shared writing and social publishing
fix positions of sidenotes + bump width
Jared Pereira
(Apr 8, 2026, 2:26 PM EDT)
0d9d621c
aebe479d
+6
-4
+1
-1
components/Footnotes/FootnoteSection.tsx
+1
-1
components/Footnotes/FootnoteSection.tsx
···
13
13
if (footnotes.length === 0) return null;
14
14
15
15
return (
16
-
<FootnoteSectionLayout className={props.hiddenOnDesktop ? "lg:hidden" : ""}>
16
+
<FootnoteSectionLayout className={props.hiddenOnDesktop ? "xl:hidden" : ""}>
17
17
{footnotes.map((fn) => (
18
18
<FootnoteEditor
19
19
key={fn.footnoteEntityID}
+5
-3
components/Footnotes/FootnoteSideColumnLayout.tsx
+5
-3
components/Footnotes/FootnoteSideColumnLayout.tsx
···
34
34
if (!scrollWrapper) return;
35
35
36
36
let scrollTop = scrollWrapper.scrollTop;
37
-
let scrollWrapperRect = scrollWrapper.getBoundingClientRect();
37
+
let containerRect = container.getBoundingClientRect();
38
38
39
39
// Sync scroll transform directly on the DOM (no React re-render)
40
40
inner.style.transform = `translateY(-${scrollTop}px)`;
···
48
48
if (!supEl) continue;
49
49
50
50
let supRect = supEl.getBoundingClientRect();
51
-
let anchorTop = supRect.top - scrollWrapperRect.top + scrollTop;
51
+
// Position relative to the side column container (which is absolute top-0 in pageWrapper),
52
+
// offset by the item's padding so the text visually aligns with the anchor
53
+
let anchorTop = supRect.top - containerRect.top + scrollTop - 4;
52
54
53
55
let itemEl = inner.querySelector(
54
56
`[data-footnote-side-id="${item.id}"]`,
···
144
146
return (
145
147
<div
146
148
ref={containerRef}
147
-
className={`footnote-side-column hidden lg:block absolute top-0 w-[200px] ${
149
+
className={`footnote-side-column hidden lg:block absolute top-0 w-[250px] ${
148
150
props.fullPageScroll
149
151
? "left-[calc(50%+var(--page-width-units)/2+12px)]"
150
152
: "left-full ml-3"