From 4a02c0a328d22c16b1ba39fd6d21dc8c6a3d5f51 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Sun, 30 Nov 2025 04:35:16 +0000 Subject: [PATCH] fix: Restore sticky action bar by using overflow-x: clip instead of hidden MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause: overflow-x: hidden on html/body elements breaks position: sticky on descendant elements. This is a known CSS behavior. Changes: - _reset.css: Changed overflow-x from 'hidden' to 'clip' on html and body - 'clip' prevents horizontal scrolling WITHOUT breaking sticky positioning - index.html: Restored hyperscript scroll handlers (initScrollBehavior, handleScroll) - main.js: Disabled JavaScript scroll fallback in favor of hyperscript Behavior: - Desktop: Action bar hides on scroll down, reappears on scroll up - Mobile (≤900px): Action bar stays visible at all times (CSS override) Tested: Both desktop and mobile scroll behaviors work correctly --- static/css/01-foundation/_reset.css | 4 ++-- static/js/main.js | 3 ++- templates/index.html | 4 +++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/static/css/01-foundation/_reset.css b/static/css/01-foundation/_reset.css index c68bd94..8dc7921 100644 --- a/static/css/01-foundation/_reset.css +++ b/static/css/01-foundation/_reset.css @@ -26,7 +26,7 @@ body { background-size: 40px 40px; /* For dark theme diagonal grid */ background-attachment: fixed; max-width: 100vw; /* Prevent horizontal overflow */ - overflow-x: hidden; /* NO horizontal scroll on mobile */ + overflow-x: clip; /* Clip prevents horizontal scroll WITHOUT breaking position: sticky */ } /* Smooth scrolling */ @@ -34,7 +34,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 70px; /* Account for fixed header */ max-width: 100vw; /* Prevent horizontal overflow */ - overflow-x: hidden; /* NO horizontal scroll */ + overflow-x: clip; /* Clip prevents horizontal scroll WITHOUT breaking position: sticky */ } /* Ensure Iconify icons display properly */ diff --git a/static/js/main.js b/static/js/main.js index b0995d2..6d91ddf 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -577,7 +577,8 @@ initHTMXHandlers(); handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode initZoomControlButtons(); - initScrollBehaviorJS(); // JavaScript fallback for scroll behavior + // Note: Scroll behavior now handled by hyperscript in index.html body tag + // initScrollBehaviorJS() removed - hyperscript handleScroll() is preferred }); /** diff --git a/templates/index.html b/templates/index.html index fc2ec1f..bee13d1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -141,7 +141,9 @@