feat(ui): center title and balance header layout

Unify title to "CC Switch" to prevent text length jumping during app switching.
Reorganize header as three-column grid with centered title.
This commit is contained in:
Jason
2025-08-31 21:49:28 +08:00
parent 84c7726940
commit 4e66f0c105
2 changed files with 5 additions and 6 deletions

View File

@@ -9,13 +9,10 @@
color: white;
padding: 0.35rem 2rem 0.45rem;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-columns: 1fr auto 1fr;
grid-template-areas:
"title actions"
"tabs actions";
"tabs title actions";
align-items: center;
row-gap: 0.45rem; /* 间隔增大一点,标题与开关分离 */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
user-select: none;
}
@@ -85,12 +82,14 @@
font-weight: 500;
margin: 0;
grid-area: title;
text-align: center;
}
.header-actions {
display: flex;
gap: 1rem;
grid-area: actions;
justify-self: end;
}
.refresh-btn,

View File

@@ -181,7 +181,7 @@ function App() {
return (
<div className="app">
<header className="app-header">
<h1>{activeApp === "claude" ? "Claude Code" : "Codex"} </h1>
<h1>CC Switch</h1>
<div className="app-tabs">
<AppSwitcher
activeApp={activeApp}