Codex fixes

components/mdx/MobileTableOfContents.tsx

@@ -8,16 +8,16 @@ export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
     if (headings.length === 0) return null;
 
     return (
-        <details className="mb-8 border-y border-line py-4">
-            <summary className="eyebrow cursor-pointer list-none">
-                Contents
+        <details className="group mb-8 border-y border-line py-4">
+            <summary className="flex cursor-pointer list-none items-center justify-between gap-4">
+                <span className="eyebrow">Contents</span>
+                <span aria-hidden className="text-base leading-none text-muted-strong transition-transform group-open:rotate-45">
+                    +
+                </span>
             </summary>
             <ul className="mt-4 space-y-2">
                 {headings.map((heading) => (
-                    <li
-                        key={heading.id}
-                        style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
-                    >
+                    <li key={heading.id} className={heading.level > 2 ? 'pl-4' : undefined}>
                         <a
                             href={`#${heading.id}`}
                             className="block text-[0.94rem] leading-7 text-muted transition-colors hover:text-ink"

components/mdx/TableOfContents.tsx

@@ -9,46 +9,30 @@ type Heading = {
 };
 
 export function TableOfContents({ headings }: { headings: Heading[] }) {
-    const [activeId, setActiveId] = useState<string>('');
+    const [activeId, setActiveId] = useState<string>(() => headings[0]?.id ?? '');
 
     useEffect(() => {
-        const handleScroll = () => {
-            const headingElements = headings.map((heading) => ({
-                id: heading.id,
-                element: document.getElementById(heading.id),
-            }));
+        const elements = headings
+            .map((heading) => document.getElementById(heading.id))
+            .filter((element): element is HTMLElement => Boolean(element));
 
-            // Find the first heading that is currently visible or just above the fold
-            // We look for headings that are above the 150px mark
-            let currentActiveId = '';
+        if (elements.length === 0) return;
 
-            for (const { id, element } of headingElements) {
-                if (!element) continue;
-                const rect = element.getBoundingClientRect();
+        const observer = new IntersectionObserver((entries) => {
+            const visible = entries
+                .filter((entry) => entry.isIntersecting)
+                .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
 
-                // If the heading is within the top portion of the screen
-                // OR if we haven't found a better one yet, this one 'might' be it
-                // We basically want the *last* heading that has a 'top' value <= some threshold
-                if (rect.top <= 150) {
-                    currentActiveId = id;
-                }
+            if (visible[0]?.target.id) {
+                setActiveId(visible[0].target.id);
             }
+        }, {
+            rootMargin: '-20% 0px -65% 0px',
+            threshold: 0,
+        });
 
-            // If we are at the very bottom, it's likely the last item
-            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 50) {
-                if (headings.length > 0) currentActiveId = headings[headings.length - 1].id;
-            }
-
-            if (currentActiveId) {
-                setActiveId(currentActiveId);
-            }
-        };
-
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        // Trigger once on mount
-        handleScroll();
-
-        return () => window.removeEventListener('scroll', handleScroll);
+        elements.forEach((element) => observer.observe(element));
+        return () => observer.disconnect();
     }, [headings]);
 
     if (headings.length === 0) return null;
@@ -58,10 +42,7 @@ export function TableOfContents({ headings }: { headings: Heading[] }) {
             <h4 className="eyebrow mb-4">Contents</h4>
             <ul className="space-y-2">
                 {Array.isArray(headings) && headings.map((heading) => (
-                    <li
-                        key={heading.id}
-                        style={{ paddingLeft: `${(heading.level - 2) * 10}px` }}
-                    >
+                    <li key={heading.id} className={heading.level > 2 ? 'pl-3' : undefined}>
                         <a
                             href={`#${heading.id}`}
                             className={`block text-[0.82rem] leading-6 transition-colors ${activeId === heading.id