From fc8ed80068f320f3dd015374f2216fa6233a3108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Mon, 27 Jul 2026 07:30:15 +0800
Subject: [PATCH] fix(desktop): line the sidebar wordmark up with the nav icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header sat at 12px while everything below it started at 24px — the
new-session, scheduled and market icons, the search glyph, the settings
gear. The name hung out on a line of its own to the left, so pad it onto
theirs.

That spends 12px of header room, and the long form was already running
out around 244px. Rather than clip it mid-letter, carry a short form as
well and swap on a container query over the title region: no sidebar
width now shows a cut-off name.
---
 desktop/src/components/layout/Sidebar.tsx | 20 ++++++++++++++++---
 desktop/src/theme/globals.css             | 24 +++++++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/desktop/src/components/layout/Sidebar.tsx b/desktop/src/components/layout/Sidebar.tsx
index 0df16b73..60509962 100644
--- a/desktop/src/components/layout/Sidebar.tsx
+++ b/desktop/src/components/layout/Sidebar.tsx
@@ -677,7 +677,7 @@ export function Sidebar({ isMobile = false, onRequestClose }: SidebarProps) {
       <div
         data-testid="sidebar-title-region"
         data-desktop-drag-region
-        className={`px-3 pb-2 ${isDesktopRuntime && !isWindows ? 'pt-[44px]' : 'pt-3'}`}
+        className={`sidebar-title-region px-3 pb-2 ${isDesktopRuntime && !isWindows ? 'pt-[44px]' : 'pt-3'}`}
       >
         <div className={`flex ${expanded ? 'items-center justify-between gap-3' : 'flex-col items-center gap-2'}`}>
           {/* The mark only stands in for the wordmark on the rail. Expanded,
@@ -685,13 +685,27 @@ export function Sidebar({ isMobile = false, onRequestClose }: SidebarProps) {
               collapsed, the copy is width-clamped to zero and the header would
               otherwise be empty. `sm` is the cleanest cut of the mark — two C's
               and the seal bar, no cursor or sparkles to turn to mush at 24px. */}
-          <div className={`flex min-w-0 items-center ${expanded ? 'gap-2.5' : 'justify-center'}`}>
+          {/* Expanded, `pl-3` lands the wordmark on the same 24px line as the
+              nav icons, the search glyph and the settings gear below it —
+              the section's own `px-3` alone left it sticking out on its own.
+              Collapsed, the mark is centered on the rail instead. */}
+          <div className={`flex min-w-0 items-center ${expanded ? 'gap-2.5 pl-3' : 'justify-center'}`}>
             {!expanded ? <BrandSeal size="sm" /> : null}
+            {/* Two forms of one wordmark. Drag the sidebar under ~256px and
+                "Claude Code Haha" stops fitting; rather than clip it mid-letter
+                the header falls back to the short form the repo already goes
+                by. The swap is a container query on the title region — see
+                `.sidebar-wordmark-*` in globals.css. */}
             <span
               className={`sidebar-copy ${expanded ? 'sidebar-copy--visible' : 'sidebar-copy--hidden'} text-base font-bold tracking-tight text-[var(--color-text-primary)]`}
               style={{ fontFamily: 'var(--font-headline)' }}
             >
-              Claude Code <span className="text-[var(--color-brand)]">Haha</span>
+              <span className="sidebar-wordmark-long">
+                Claude Code <span className="text-[var(--color-brand)]">Haha</span>
+              </span>
+              <span className="sidebar-wordmark-short">
+                cc-<span className="text-[var(--color-brand)]">haha</span>
+              </span>
             </span>
           </div>
           <div className={`flex items-center ${expanded ? 'gap-1.5' : 'flex-col gap-2'}`}>
diff --git a/desktop/src/theme/globals.css b/desktop/src/theme/globals.css
index bb726711..1a4e1dcb 100644
--- a/desktop/src/theme/globals.css
+++ b/desktop/src/theme/globals.css
@@ -1768,6 +1768,30 @@ body.sidebar-resizing * {
   background: var(--color-outline-a92);
 }
 
+/* The header carries the wordmark in two forms and swaps on available width,
+   so a narrow sidebar never has to clip the name mid-letter. The query runs on
+   the title region rather than the panel because that is the box the wordmark
+   actually shares with the GitHub link and the collapse button. */
+.sidebar-title-region {
+  container: sidebar-title / inline-size;
+}
+
+.sidebar-wordmark-short {
+  display: none;
+}
+
+/* 230px of content box is the last step where the long form still clears the
+   GitHub link; one drag notch narrower and it would start losing letters. */
+@container sidebar-title (max-width: 230px) {
+  .sidebar-wordmark-long {
+    display: none;
+  }
+
+  .sidebar-wordmark-short {
+    display: inline;
+  }
+}
+
 .activity-summary-panel {
   container-type: inline-size;
 }