Search bar pinned again, now flush under the header at every width (sticky offset follows the header's real height); v2.25.2

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "2.25.1",
+  "version": "2.25.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "2.25.1",
+      "version": "2.25.2",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.1135.0",
         "@dnd-kit/core": "^6.3.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.25.1",
+  "version": "2.25.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -34,7 +34,10 @@
 .site-search-bar {
   background: #13120d;
   border-bottom: 1px solid #28241a;
-  /* Scrolls away with the page; only the header stays pinned */
+  position: sticky;
+  /* --site-header-h is set from the header's real height (see SiteHeader), so the bar sits flush below it */
+  top: var(--site-header-h, 72px);
+  z-index: 99;
 }
 .site-search-bar-inner {
   max-width: 900px;

src/App.tsx

@@ -419,11 +419,23 @@ function SiteHeader({ content }: { content: SiteContent }) {
   const [studiesOpen, setStudiesOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const studiesDropdownRef = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLElement>(null)
   const spotifyUrl = content.platformSpotifyUrl || '/spotify'
   const location = useLocation()
   const episodesActive = location.pathname.startsWith('/episodes') || location.pathname.startsWith('/finished') || location.pathname.startsWith('/nuggets')
   const studiesActive = location.pathname.startsWith('/study') || location.pathname === '/scripture'
 
+  // The pinned search bar sits just under the header, whatever height the header is at this screen size
+  useEffect(() => {
+    const header = headerRef.current
+    if (!header) return
+    const update = () => document.documentElement.style.setProperty('--site-header-h', `${header.getBoundingClientRect().height}px`)
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(header)
+    return () => observer.disconnect()
+  }, [])
+
   useEffect(() => {
     function handleOutsideClick(e: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
@@ -438,7 +450,7 @@ function SiteHeader({ content }: { content: SiteContent }) {
   }, [episodesOpen, studiesOpen])
 
   return (
-    <header className="site-header">
+    <header className="site-header" ref={headerRef}>
       <div className="header-inner">
         <Link to="/" className="header-logo" aria-label="Home">
           <img src="/book_icon.png" alt="" className="header-logo-img" />