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:
@@ -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,
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user