fix(settings): prevents header oscillation during smooth scroll

The scroll listener that shrinks/expands the header was firing during
programmatic TOC scrolling, causing a feedback loop: scroll crosses
50px threshold → header resizes → content shifts → scroll position
changes → header resizes again. Uses a data-scrollLock attribute to
suppress header state updates during TOC-driven scroll animations.
Dispatches a synthetic scroll event on completion to sync final state.

Author: wgordon17

src/app/components/settings/SettingsPage.tsx

@@ -82,7 +82,10 @@ export default function SettingsPage() {
 
   const [scrolled, setScrolled] = createSignal(false);
   onMount(() => {
-    const onScroll = () => setScrolled(window.scrollY > 50);
+    const onScroll = () => {
+      if (document.documentElement.dataset.scrollLock) return;
+      setScrolled(window.scrollY > 50);
+    };
     window.addEventListener("scroll", onScroll, { passive: true });
     onCleanup(() => window.removeEventListener("scroll", onScroll));
   });

src/app/components/settings/SettingsTOC.tsx

@@ -109,11 +109,14 @@ export default function SettingsTOC() {
   function scrollToSection(id: string) {
     scrollEndCleanup?.();
     setScrollingTo(id);
+    document.documentElement.dataset.scrollLock = "1";
     const el = document.getElementById(id);
-    if (!el) { setScrollingTo(null); return; }
+    if (!el) { setScrollingTo(null); delete document.documentElement.dataset.scrollLock; return; }
     const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     const clear = () => {
       setScrollingTo(null);
+      delete document.documentElement.dataset.scrollLock;
+      window.dispatchEvent(new Event("scroll"));
       scrollEndCleanup = undefined;
     };
     if (prefersReduced) {