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 {
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;
}
}
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="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 %}
</head>
<body>