fix(mobile): collapse header brand to a C home button on phones

On <430px screens the full Codeman wordmark wasted header space; the brand
now renders a single C (same tap target, still app.goHome()). Desktop and
tablet keep the full wordmark. The compact letter lives in a separate
aria-hidden span so i18n custom branding keeps rewriting only the wordmark.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-07-23 22:47:09 +02:00
parent b710013add
commit 1be98ff8a3
3 changed files with 19 additions and 3 deletions
+3 -1
View File
@@ -80,7 +80,9 @@
<!-- Compact Header with Session Tabs --> <!-- Compact Header with Session Tabs -->
<header class="header"> <header class="header">
<div class="header-brand"> <div class="header-brand">
<span class="logo" onclick="app.goHome()" title="Go to main page">Codeman</span> <span class="logo" onclick="app.goHome()" title="Go to main page"
><span class="logo-text">Codeman</span><span class="logo-compact" aria-hidden="true">C</span></span
>
</div> </div>
<!-- Session Tabs --> <!-- Session Tabs -->
+11 -2
View File
@@ -350,7 +350,8 @@ html.mobile-init .file-browser-panel {
Phone Breakpoint (<430px) Phone Breakpoint (<430px)
============================================================================ */ ============================================================================ */
@media (max-width: 430px) { @media (max-width: 430px) {
/* Compact header brand on phones — acts as home button */ /* Phone brand collapses to a single "C" home button: hide the wordmark,
keep the tap target */
.header-brand { .header-brand {
padding-right: 0.25rem; padding-right: 0.25rem;
margin-right: 0.2rem; margin-right: 0.2rem;
@@ -358,7 +359,15 @@ html.mobile-init .file-browser-panel {
} }
.header-brand .logo { .header-brand .logo {
font-size: 0.7rem; font-size: 0.85rem;
}
.header-brand .logo .logo-text {
display: none;
}
.header-brand .logo .logo-compact {
display: inline;
} }
/* Font controls - compact on phones, visibility controlled by JS */ /* Font controls - compact on phones, visibility controlled by JS */
+5
View File
@@ -289,6 +289,11 @@ body {
transition: color var(--transition-smooth), text-shadow var(--transition-smooth), filter var(--transition-smooth); transition: color var(--transition-smooth), text-shadow var(--transition-smooth), filter var(--transition-smooth);
} }
/* Single-letter brand shown only on phones (see mobile.css phone breakpoint) */
.logo .logo-compact {
display: none;
}
.logo:hover { .logo:hover {
color: #93c5fd; color: #93c5fd;
text-shadow: 0 0 12px rgba(96, 165, 250, 0.5), 0 0 24px rgba(96, 165, 250, 0.2); text-shadow: 0 0 12px rgba(96, 165, 250, 0.5), 0 0 24px rgba(96, 165, 250, 0.2);