DarkSingularity/KeepItGoingServer
Internal
Public Access
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 1 Wiki Activity

Fix mobile header layout - remove vertical stacking

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Keith Smith
2025-12-26 21:14:30 -07:00
co-authored by Claude Sonnet 4.5
parent e038e47247
commit d83b1e3091
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/app.css
+14 -14
View File
@@ -1021,28 +1021,28 @@ a:hover {
} }
.app-brand { .app-brand {
font-size: 1rem; font-size: 0.9rem;
}
.btn {
padding: var(--space-xs) var(--space-sm);
font-size: 0.875rem;
} }
.app-sidebar { .app-sidebar {
width: 260px; /* Narrower on very small screens */ width: 260px; /* Narrower on very small screens */
} }
/* Stack Profile and Logout buttons vertically */ /* Smaller buttons on very small screens */
.header-user { .header-user .btn {
flex-direction: column; font-size: 0.75rem;
gap: var(--space-xs); padding: var(--space-xs) var(--space-sm);
align-items: stretch; min-height: 36px;
} }
.header-user .btn { .theme-toggle {
width: 100%; min-width: 40px;
font-size: 0.8rem; min-height: 40px;
}
.sidebar-toggle {
min-width: 40px;
min-height: 40px;
} }
} }
templates/base.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="icon" type="image/svg+xml" href="{% static 'favicons/favicon.svg' %}"> <link rel="icon" type="image/svg+xml" href="{% static 'favicons/favicon.svg' %}">
<link rel="alternate icon" href="{% static 'favicons/favicon.svg' %}" type="image/svg+xml"> <link rel="alternate icon" href="{% static 'favicons/favicon.svg' %}" type="image/svg+xml">
<link rel="stylesheet" href="{% static 'css/app.css' %}?v=2"> <link rel="stylesheet" href="{% static 'css/app.css' %}?v=3">
{% block extra_css %}{% endblock %} {% block extra_css %}{% endblock %}
</head> </head>
<body> <body>