fix: Replace hyperscript scroll handler with JavaScript implementation

The hyperscript-based scroll behavior was not working reliably across all browsers.
Replaced with a pure JavaScript implementation that:

Desktop (>900px):
- Hides action bar on scroll down (past 100px threshold)
- Shows action bar on scroll up
- Shows action bar at top of page

Mobile (≤900px):
- Always keeps action bar visible
- Actively removes header-hidden class on mobile
- Handles viewport resize for responsive testing

Changes:
- Added initScrollBehaviorJS() function to main.js
- Removed hyperscript scroll handlers from body tag in index.html
- Kept keyboard shortcut handlers in hyperscript (still working)
- Uses passive scroll listener for better performance

This fixes the bug where:
- Desktop: bar would hide but not show again on scroll up
- Mobile: bar was incorrectly hiding despite CSS override

static/js/main.js

@@ -577,8 +577,78 @@
         initHTMXHandlers();
         handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
         initZoomControlButtons();
+        initScrollBehaviorJS(); // JavaScript fallback for scroll behavior
     });
 
+    /**
+     * JavaScript-based scroll behavior (fallback for hyperscript)
+     * Desktop: Hide header on scroll down, show on scroll up
+     * Mobile (≤900px): Always show header (CSS handles this, but we skip adding class)
+     */
+    function initScrollBehaviorJS() {
+        let lastScrollY = 0;
+        const scrollThreshold = 100;
+        const actionBar = document.querySelector('.action-bar');
+        const navMenu = document.querySelector('.navigation-menu');
+
+        if (!actionBar) return;
+
+        function isMobileViewport() {
+            return window.innerWidth <= 900;
+        }
+
+        function handleScroll() {
+            const currentScrollY = window.scrollY || window.pageYOffset;
+
+            // Skip header hiding logic on mobile - CSS override handles visibility
+            // but we still avoid adding the class for cleaner state
+            if (isMobileViewport()) {
+                // On mobile, always ensure header is visible
+                actionBar.classList.remove('header-hidden');
+                if (navMenu) navMenu.classList.remove('header-hidden');
+                lastScrollY = currentScrollY;
+                return;
+            }
+
+            // At top of page - always show header
+            if (currentScrollY <= scrollThreshold) {
+                actionBar.classList.remove('header-hidden');
+                if (navMenu && navMenu.classList.contains('menu-open')) {
+                    navMenu.classList.remove('header-hidden');
+                }
+            }
+            // Scrolling DOWN past threshold - hide header
+            else if (currentScrollY > lastScrollY && currentScrollY > scrollThreshold) {
+                actionBar.classList.add('header-hidden');
+                if (navMenu && navMenu.classList.contains('menu-open')) {
+                    navMenu.classList.add('header-hidden');
+                }
+            }
+            // Scrolling UP - show header
+            else if (currentScrollY < lastScrollY) {
+                actionBar.classList.remove('header-hidden');
+                if (navMenu && navMenu.classList.contains('menu-open')) {
+                    navMenu.classList.remove('header-hidden');
+                }
+            }
+
+            lastScrollY = currentScrollY;
+        }
+
+        // Use passive listener for better scroll performance
+        window.addEventListener('scroll', handleScroll, { passive: true });
+
+        // Also handle resize (viewport changes)
+        window.addEventListener('resize', function() {
+            if (isMobileViewport()) {
+                actionBar.classList.remove('header-hidden');
+                if (navMenu) navMenu.classList.remove('header-hidden');
+            }
+        });
+
+        console.log('Scroll behavior JS initialized');
+    }
+
     // =============================================================================
     // HYPERSCRIPT-POWERED FEATURES (NO JS NEEDED)
     // =============================================================================