site: stop the filter panel sticking on small screens (batch E)

At 375x800 the wrapped filter panel was 527px tall and pinned while
scrolling, leaving about 270px of an 800px screen for entries. On
screens up to 640px wide or 600px tall it now scrolls away with the
page; the Top button brings it back and focuses search.

app.js publishes --sticky-h as 0 when the panel is not sticky, so
permalinks and category jumps no longer reserve 527px of empty space
above the target, and the category scroll-spy measures from the top of
the viewport.

Checked in touch emulation: entries get the full screen at 375x800
and 800x400; #entry- permalinks land 16px from the top; Top returns
with search visible and focused. Desktop is unchanged (sticky, 228px).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Wc67NX9MM964uaVGn4bpZJ

Author: TMHSDigital

site/public/app.js

@@ -366,14 +366,14 @@
     const controls = $(".controls");
     // Anchored jumps (chip links, #entry- permalinks) would otherwise land
     // underneath the sticky filter bar. Its height varies with wrapping, so
-    // publish the measured value and let CSS scroll-margin use it.
-    if (controls) {
-      document.documentElement.style.setProperty(
-        "--sticky-h",
-        `${Math.round(controls.getBoundingClientRect().height)}px`
-      );
-    }
-    const cutoff = (controls ? controls.getBoundingClientRect().bottom : 0) + 8;
+    // publish the measured value and let CSS scroll-margin use it. On small
+    // screens the bar is not sticky, and nothing needs clearing.
+    const stuck = !!controls && getComputedStyle(controls).position === "sticky";
+    document.documentElement.style.setProperty(
+      "--sticky-h",
+      stuck ? `${Math.round(controls.getBoundingClientRect().height)}px` : "0px"
+    );
+    const cutoff = (stuck ? controls.getBoundingClientRect().bottom : 0) + 8;
     let found = null;
     for (const h of groupHeadings) {
       if (h.getBoundingClientRect().top <= cutoff) found = h.getAttribute("data-cat");

site/public/styles.css

@@ -1005,8 +1005,17 @@ input:focus-visible {
   }
 }
 
+/* On a phone the wrapped filter panel is about 530px tall, two thirds of the
+   screen, and pinning it left a strip for the entries. Small or short screens
+   scroll it away with the page instead; "Top" brings it back. */
+@media (max-width: 640px), (max-height: 600px) {
+  .controls {
+    position: static;
+  }
+}
+
 /* Anchored targets must clear the sticky filter bar. app.js measures it into
-   --sticky-h; the fallback covers the no-JS page. */
+   --sticky-h (0 when it is not sticky); the fallback covers the no-JS page. */
 .group-heading,
 .entry-card {
   scroll-margin-top: calc(var(--sticky-h, 10rem) + 1rem);