Fix ToC auto-scrolling

Previously this scrolled any appropriate ancestor (which broke on small
screens when the sidebar stopped being sticky and expanded, meaning the
entire page was scrolled up to the contents instead - very broken) and
makes it center-ish the item, which avoids mess for the first and last
items and just feels a bit cleaner.

Author: pimterry

src/components/modules/table-content/hooks/use-active-toc.ts

@@ -2,21 +2,41 @@ import { useEffect } from 'react';
 
 import { screens } from '@/styles';
 
+const getHeadings = () =>
+  document.querySelectorAll<HTMLElement>('article :is(h2,h3,h4), div#intro');
+
 function useActiveToc() {
   useEffect(() => {
     const setCurrent: IntersectionObserverCallback = entries => {
+      const scrollContainer = document
+        .querySelector('#table-of-content-headings')
+        ?.parentElement;
+      if (!scrollContainer) return;
+
       for (const entry of entries) {
         const { id } = entry.target as HTMLElement;
         const isMobile = matchMedia(`(max-width: ${screens.lg})`);
-        const tocHeadingEl = document.querySelector(`#table-of-content-headings a[href="#${id}"]`);
+
+        const tocHeadingEl = scrollContainer.querySelector<HTMLElement>(`a[href="#${id}"]`);
         if (!tocHeadingEl) return;
 
         if (entry.isIntersecting) {
           // Remove active class from all toc items
-          document.querySelectorAll('#table-of-content-headings a').forEach(e => e.classList.remove('active'));
+          scrollContainer.querySelectorAll('a')
+            .forEach(e => e.classList.remove('active'));
+
+          // Add active to the correct toc
           tocHeadingEl.classList.add('active');
+
           if (!isMobile.matches) {
-            tocHeadingEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            const elementTop = tocHeadingEl.offsetTop;
+            const containerHeight = scrollContainer.clientHeight;
+            const scrollOffset = elementTop - (containerHeight / 2);
+
+            scrollContainer.scroll({
+              top: scrollOffset,
+              behavior: 'smooth'
+            });
           }
         }
       }
@@ -29,14 +49,10 @@ function useActiveToc() {
 
     const headingObserver = new IntersectionObserver(setCurrent, observerOptions);
 
-    document
-      .querySelectorAll<HTMLElement>('article :is(h2,h3,h4), div#intro')
-      .forEach(heading => headingObserver.observe(heading));
+    getHeadings().forEach(heading => headingObserver.observe(heading));
 
     return () => {
-      document
-        .querySelectorAll<HTMLElement>('article :is(h2,h3,h4), div#intro')
-        .forEach(heading => headingObserver.unobserve(heading));
+      getHeadings().forEach(heading => headingObserver.unobserve(heading));
     };
   }, []);
 }