From d83b1e3091206de9a7081facb273ab3defaadf3a Mon Sep 17 00:00:00 2001 From: Keith Smith Date: Fri, 26 Dec 2025 21:14:30 -0700 Subject: [PATCH] Fix mobile header layout - remove vertical stacking MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The flex-direction: column on header-user was causing buttons to overflow outside the header bar. Changed approach to keep buttons horizontal but make them smaller on very small screens. Changes: - Removed flex-direction: column from 480px breakpoint - Keep buttons horizontal with smaller font size - Reduced button min-height to 36px on small screens - Reduced touch targets slightly (40px) for very small screens - Smaller brand font size (0.9rem) Updated cache version to v=3 to force reload. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- static/css/app.css | 28 ++++++++++++++-------------- templates/base.html | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/static/css/app.css b/static/css/app.css index afac155..fb95a55 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -1021,28 +1021,28 @@ a:hover { } .app-brand { - font-size: 1rem; - } - - .btn { - padding: var(--space-xs) var(--space-sm); - font-size: 0.875rem; + font-size: 0.9rem; } .app-sidebar { width: 260px; /* Narrower on very small screens */ } - /* Stack Profile and Logout buttons vertically */ - .header-user { - flex-direction: column; - gap: var(--space-xs); - align-items: stretch; + /* Smaller buttons on very small screens */ + .header-user .btn { + font-size: 0.75rem; + padding: var(--space-xs) var(--space-sm); + min-height: 36px; } - .header-user .btn { - width: 100%; - font-size: 0.8rem; + .theme-toggle { + min-width: 40px; + min-height: 40px; + } + + .sidebar-toggle { + min-width: 40px; + min-height: 40px; } } diff --git a/templates/base.html b/templates/base.html index 0839be6..7eb7a95 100644 --- a/templates/base.html +++ b/templates/base.html @@ -10,7 +10,7 @@ - + {% block extra_css %}{% endblock %}