From f836769ad7560167a9bf5b114b48015ca67cd9bb Mon Sep 17 00:00:00 2001 From: Keith Smith Date: Fri, 26 Dec 2025 21:18:14 -0700 Subject: [PATCH] CRITICAL FIX: Move base CSS before media queries MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sidebar-toggle and mobile-overlay base definitions were placed AFTER the media queries, causing them to override the responsive styles. This prevented the hamburger menu from showing and broke the sidebar drawer functionality. Fixed by moving base definitions before the Mobile Responsive section. CSS order is now correct: 1. Base styles (display: none for sidebar-toggle) 2. Media queries (display: flex at 768px) This allows the media query to properly override the base style. Updated cache version to v=4. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- static/css/app.css | 56 ++++++++++++++++++++++----------------------- templates/base.html | 2 +- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/static/css/app.css b/static/css/app.css index fb95a55..3b0fa09 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -857,6 +857,34 @@ a:hover { font-size: var(--font-sm); } +/* Sidebar toggle button (hidden on desktop, shown on mobile) */ +.sidebar-toggle { + display: none; + background: none; + border: none; + padding: var(--space-sm); + cursor: pointer; + color: var(--text-secondary); +} + +.sidebar-toggle svg { + width: 24px; + height: 24px; +} + +/* Mobile overlay */ +.mobile-overlay { + display: none; + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 40; +} + +.mobile-overlay.visible { + display: block; +} + /* ============================================ Mobile Responsive ============================================ */ @@ -1055,34 +1083,6 @@ a:hover { display: block; } -/* Sidebar toggle button (visible on mobile) */ -.sidebar-toggle { - display: none; - background: none; - border: none; - padding: var(--space-sm); - cursor: pointer; - color: var(--text-secondary); -} - -.sidebar-toggle svg { - width: 24px; - height: 24px; -} - -/* Mobile overlay */ -.mobile-overlay { - display: none; - position: fixed; - inset: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 40; -} - -.mobile-overlay.visible { - display: block; -} - /* ============================================ Color Presets (Group Modal) ============================================ */ diff --git a/templates/base.html b/templates/base.html index 7eb7a95..9b1c232 100644 --- a/templates/base.html +++ b/templates/base.html @@ -10,7 +10,7 @@ - + {% block extra_css %}{% endblock %}