From 1be98ff8a3fef9a5549351a8fe4cb7174e480469 Mon Sep 17 00:00:00 2001
From: Codeman maintainer <noreply@anthropic.com>
Date: Thu, 23 Jul 2026 22:47:09 +0200
Subject: [PATCH] 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>
---
 src/web/public/index.html |  4 +++-
 src/web/public/mobile.css | 13 +++++++++++--
 src/web/public/styles.css |  5 +++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/web/public/index.html b/src/web/public/index.html
index 238730d4..daa2b2f3 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -80,7 +80,9 @@
     <!-- Compact Header with Session Tabs -->
     <header class="header">
       <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>
 
       <!-- Session Tabs -->
diff --git a/src/web/public/mobile.css b/src/web/public/mobile.css
index 4c204201..67cf181d 100644
--- a/src/web/public/mobile.css
+++ b/src/web/public/mobile.css
@@ -350,7 +350,8 @@ html.mobile-init .file-browser-panel {
    Phone Breakpoint (<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 {
     padding-right: 0.25rem;
     margin-right: 0.2rem;
@@ -358,7 +359,15 @@ html.mobile-init .file-browser-panel {
   }
 
   .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 */
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index c854cb7c..dc33b0c0 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -289,6 +289,11 @@ body {
   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 {
   color: #93c5fd;
   text-shadow: 0 0 12px rgba(96, 165, 250, 0.5), 0 0 24px rgba(96, 165, 250, 0.2);