From 16dd72b6246ec98fff4cfecc86d31b10f9eea59d Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Tue, 3 Feb 2026 13:29:46 +0000
Subject: [PATCH] fix(timeline): restore sticky month headers and jump-to-top
 button

Remove wrapper div around month headings so the h2 is a direct child
of the timeline container. position: sticky was broken because the
heading's containing block (the wrapper) was only as tall as the
heading itself, giving it no room to stick.

Also update MutationObserver to detect headings added as direct
children via node.matches() in addition to node.querySelector().
---
 templates/partials/timeline_month.html | 18 ++++++++----------
 templates/timeline.html                |  3 +++
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/templates/partials/timeline_month.html b/templates/partials/timeline_month.html
index 96fe4cd..e241cbc 100644
--- a/templates/partials/timeline_month.html
+++ b/templates/partials/timeline_month.html
@@ -1,13 +1,11 @@
-<div id="{{ month.anchor }}" class="scroll-mt-24" data-timeline-month>
-  <h2 class="timeline-heading mb-6 text-2xl font-semibold text-amber-800">
-    {{ month.heading }}
-    <button type="button" class="timeline-top-btn" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" aria-label="Back to top">
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
-      </svg>
-    </button>
-  </h2>
-</div>
+<h2 id="{{ month.anchor }}" class="timeline-heading scroll-mt-24 mb-6 text-2xl font-semibold text-amber-800" data-timeline-month>
+  {{ month.heading }}
+  <button type="button" class="timeline-top-btn" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" aria-label="Back to top">
+    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
+    </svg>
+  </button>
+</h2>
 {% for event in month.events %}
 <div class="timeline-item relative mb-8" data-timeline-event>
   {# Timeline node/bullet #}
diff --git a/templates/timeline.html b/templates/timeline.html
index 365c2a2..0dfb4bc 100644
--- a/templates/timeline.html
+++ b/templates/timeline.html
@@ -201,6 +201,9 @@
       mutations.forEach((mutation) => {
         mutation.addedNodes.forEach((node) => {
           if (node.nodeType === Node.ELEMENT_NODE) {
+            if (node.matches?.(".timeline-heading")) {
+              stickyObserver.observe(node)
+            }
             const heading = node.querySelector?.(".timeline-heading")
             if (heading) {
               stickyObserver.observe(heading)