sdaduanbilei/cc-haha
1
0
Fork 0
mirror of https://github.com/NanmiCoder/cc-haha synced 2026-07-31 16:33:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(desktop): line the sidebar wordmark up with the nav icons

Browse Source 
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.
This commit is contained in:
程序员阿江(Relakkes) 2026-07-27 07:30:15 +08:00
parent fc9f5d554e
commit fc8ed80068
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
desktop/src/components/layout/Sidebar.tsx
View File

@ -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'}`}>

24
desktop/src/theme/globals.css
View File

@ -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;
}