site: the floating button returns to search, where it focuses

The "Top" button scrolled to the page header and then focused the
search box about 1,600px further down, so on desktop a keyboard user
was left typing into a field off screen. Since the phone fix, the
button is also how small screens get the filters back.

It is now "Search": it scrolls to the catalog section and focuses the
search box without a second scroll. Checked at 1280x900 (with and
without reduced motion), 375x800 and 800x400: the search box ends on
screen and focused, and typing filters immediately.

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

@@ -634,10 +634,13 @@
     });
 
     const top = $("#to-top");
+    // Returns to the catalog's search and filters, which on small screens have
+    // scrolled away. It used to scroll to the page top and then focus search
+    // further down, leaving keyboard users typing into a field off screen.
     top.addEventListener("click", () => {
       const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
-      window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
-      search.focus();
+      $("#catalog").scrollIntoView({ block: "start", behavior: reduce ? "auto" : "smooth" });
+      search.focus({ preventScroll: true });
     });
 
     window.addEventListener("scroll", onScroll, { passive: true });

site/public/index.html

@@ -170,7 +170,7 @@ <h2 id="guides-title">Guides</h2>
     </footer>
 
     <button type="button" class="to-top" id="to-top" hidden>
-      <span aria-hidden="true">↑</span> Top
+      <span aria-hidden="true">↑</span> Search
     </button>
 
     <dialog class="entry-dialog" id="entry-dialog" aria-labelledby="dialog-title">

site/public/styles.css

@@ -1007,7 +1007,7 @@ 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. */
+   scroll it away with the page instead; the floating Search button brings it back. */
 @media (max-width: 640px), (max-height: 600px) {
   .controls {
     position: static;