fix: unify page header styles across all views

- Extract shared .page-header and .header-title to global.scss
- Standardize padding to 21px 20px matching sidebar logo height
- Fix Usage page layout to flex column with standard header
- Fix Logs page header CSS selector after class rename
- Normalize button sizes to small across all headers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/chat/ChatPanel.vue

@@ -556,7 +556,7 @@ async function handleRenameConfirm() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: 21px 20px;
   border-bottom: 1px solid $border-color;
   flex-shrink: 0;
 }
@@ -571,8 +571,8 @@ async function handleRenameConfirm() {
 }
 
 .header-session-title {
-  font-size: 14px;
+  font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   color: $text-primary;
   white-space: nowrap;
   overflow: hidden;

src/styles/global.scss

@@ -58,3 +58,19 @@ a {
 ::selection {
   background: rgba($accent-primary, 0.3);
 }
+
+// Shared page header
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 21px 20px;
+  border-bottom: 1px solid $border-color;
+  flex-shrink: 0;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: $text-primary;
+}

src/styles/variables.scss

@@ -44,7 +44,7 @@ $font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
 // Layout
 $sidebar-width: 240px;
 $sidebar-collapsed-width: 64px;
-$header-height: 56px;
+$header-height: 60px;
 
 // Radius
 $radius-sm: 6px;

src/views/ChannelsView.vue

@@ -15,7 +15,7 @@ onMounted(() => {
 
 <template>
   <div class="channels-view">
-    <header class="channels-header">
+    <header class="page-header">
       <h2 class="header-title">{{ t('sidebar.channels') }}</h2>
     </header>
 
@@ -36,20 +36,6 @@ onMounted(() => {
   flex-direction: column;
 }
 
-.channels-header {
-  display: flex;
-  align-items: center;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
 .channels-content {
   flex: 1;
   overflow-y: auto;

src/views/JobsView.vue

@@ -38,9 +38,9 @@ async function handleSave() {
 
 <template>
   <div class="jobs-view">
-    <header class="jobs-header">
+    <header class="page-header">
       <h2 class="header-title">{{ t('jobs.title') }}</h2>
-      <NButton type="primary" @click="openCreateModal">
+      <NButton type="primary" size="small" @click="openCreateModal">
         <template #icon>
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
         </template>
@@ -72,21 +72,6 @@ async function handleSave() {
   flex-direction: column;
 }
 
-.jobs-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
 .jobs-content {
   flex: 1;
   overflow-y: auto;

src/views/LogsView.vue

@@ -86,7 +86,7 @@ onMounted(async () => {
 
 <template>
   <div class="logs-view">
-    <header class="logs-header">
+    <header class="page-header">
       <h2 class="header-title">{{ t('logs.title') }}</h2>
       <div class="header-actions">
         <NSelect
@@ -158,21 +158,9 @@ onMounted(async () => {
   flex-direction: column;
 }
 
-.logs-header {
+.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
   gap: 12px;
   flex-wrap: wrap;
-
-  .header-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: $text-primary;
-    white-space: nowrap;
 }
 
 .header-actions {
@@ -181,7 +169,6 @@ onMounted(async () => {
   gap: 8px;
   flex-wrap: wrap;
 }
-}
 
 .search-input {
   padding: 4px 10px;

src/views/MemoryView.vue

@@ -72,7 +72,7 @@ const displayUser = computed(() => (data.value?.user || '').replace(/§/g, '\n\n
 
 <template>
   <div class="memory-view">
-    <header class="memory-header">
+    <header class="page-header">
       <h2 class="header-title">{{ t('memory.title') }}</h2>
       <NButton size="small" quaternary @click="loadMemory">
         <template #icon>
@@ -193,21 +193,6 @@ const displayUser = computed(() => (data.value?.user || '').replace(/§/g, '\n\n
   flex-direction: column;
 }
 
-.memory-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
 .memory-content {
   flex: 1;
   overflow: hidden;

src/views/ModelsView.vue

@@ -30,9 +30,9 @@ async function handleSaved() {
 
 <template>
   <div class="models-view">
-    <header class="models-header">
+    <header class="page-header">
       <h2 class="header-title">{{ t('models.title') }}</h2>
-      <NButton type="primary" @click="openCreateModal">
+      <NButton type="primary" size="small" @click="openCreateModal">
         <template #icon>
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
         </template>
@@ -63,21 +63,6 @@ async function handleSaved() {
   flex-direction: column;
 }
 
-.models-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
 .models-content {
   flex: 1;
   overflow-y: auto;

src/views/SettingsView.vue

@@ -30,7 +30,7 @@ async function saveApiServer(values: Record<string, any>) {
 
 <template>
   <div class="settings-view">
-    <header class="settings-header">
+    <header class="page-header">
       <h2 class="header-title">{{ t('settings.title') }}</h2>
     </header>
 
@@ -107,20 +107,6 @@ async function saveApiServer(values: Record<string, any>) {
   flex-direction: column;
 }
 
-.settings-header {
-  display: flex;
-  align-items: center;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
 .settings-content {
   flex: 1;
   overflow-y: auto;

src/views/SkillsView.vue

@@ -34,7 +34,7 @@ function handleSelect(category: string, skill: string) {
 
 <template>
   <div class="skills-view">
-    <header class="skills-header">
+    <header class="page-header">
       <h2 class="header-title">{{ t('skills.title') }}</h2>
       <NInput
         v-model:value="searchQuery"
@@ -85,23 +85,6 @@ function handleSelect(category: string, skill: string) {
   flex-direction: column;
 }
 
-.skills-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: $text-primary;
-  flex-shrink: 0;
-}
-
 .search-input {
   width: 220px;
 }

src/views/UsageView.vue

@@ -17,13 +17,14 @@ onMounted(() => {
 
 <template>
   <div class="usage-view">
-    <header class="usage-header">
+    <header class="page-header">
-      <h2 class="usage-title">{{ t('usage.title') }}</h2>
+      <h2 class="header-title">{{ t('usage.title') }}</h2>
       <NButton size="small" quaternary :loading="usageStore.isLoading" @click="usageStore.loadSessions()">
         {{ t('usage.refresh') }}
       </NButton>
     </header>
 
+    <div class="usage-content">
       <div v-if="usageStore.isLoading && usageStore.sessions.length === 0" class="usage-loading">
         {{ t('common.loading') }}
       </div>
@@ -38,29 +39,31 @@ onMounted(() => {
         {{ t('usage.noData') }}
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
 .usage-view {
-  padding: 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.usage-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
   max-width: 960px;
   margin: 0 auto;
-}
+  width: 100%;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 
-.usage-header {
+  &::-webkit-scrollbar {
-  display: flex;
+    display: none;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
   }
-
-.usage-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: $text-primary;
-  margin: 0;
 }
 
 .usage-loading,