From 87496b565697e54b5de13bb4b0906c31c7e4a285 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Mon, 27 Jul 2026 14:55:36 +0800
Subject: [PATCH] fix(frontend): polish dashboard layout

Keep dashboard header actions pinned to the action column, widen the xAI runtime field, and align active-account usage metrics without changing the shared usage window component.

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/src/components/base/BasePageHeader.vue               | 4 ++--
 .../src/views/dashboard/components/AccountOverviewCard.vue    | 3 +--
 frontend/src/views/dashboard/components/WireProfileCard.vue   | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/base/BasePageHeader.vue b/frontend/src/components/base/BasePageHeader.vue
index 211384419..6ed8f5cfc 100644
--- a/frontend/src/components/base/BasePageHeader.vue
+++ b/frontend/src/components/base/BasePageHeader.vue
@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <header class="flex min-h-17 shrink-0 flex-wrap items-start justify-between gap-4">
+  <header class="grid min-h-17 shrink-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 gap-y-3">
     <div class="min-w-0">
       <h1 class="m-0 text-[34px] leading-[1.15] font-extrabold text-(--cp-text-primary)">
         {{ title }}
@@ -22,7 +22,7 @@ defineProps<{
     </div>
     <div
       v-if="$slots.actions"
-      class="mt-0.5 flex shrink-0 items-center gap-2 max-sm:w-full max-sm:justify-end"
+      class="mt-0.5 flex shrink-0 items-center justify-end gap-2"
     >
       <slot name="actions" />
     </div>
diff --git a/frontend/src/views/dashboard/components/AccountOverviewCard.vue b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
index 97770e8c0..a2af63432 100644
--- a/frontend/src/views/dashboard/components/AccountOverviewCard.vue
+++ b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
@@ -249,7 +249,7 @@ const statusBars = computed(() => {
               </AccountIdentityCell>
 
               <span
-                class="grid min-w-0 grid-cols-[minmax(0,0.82fr)_minmax(0,0.64fr)_minmax(104px,1fr)] items-end gap-3 xl:contents"
+                class="grid min-w-0 grid-cols-[minmax(0,0.82fr)_minmax(0,0.64fr)_minmax(104px,1fr)] items-start gap-3 xl:contents"
               >
                 <span class="grid min-w-0 gap-1">
                   <span class="text-[11px] leading-none font-bold text-(--cp-text-muted)">
@@ -273,7 +273,6 @@ const statusBars = computed(() => {
                   :window="account.usageWindow"
                   :show-local-value="false"
                   variant="compact"
-                  class="xl:h-7.25"
                 />
               </span>
             </article>
diff --git a/frontend/src/views/dashboard/components/WireProfileCard.vue b/frontend/src/views/dashboard/components/WireProfileCard.vue
index f35656e5f..acab0128f 100644
--- a/frontend/src/views/dashboard/components/WireProfileCard.vue
+++ b/frontend/src/views/dashboard/components/WireProfileCard.vue
@@ -241,7 +241,7 @@ function providerLabel(provider: string) {
           <dl
             class="m-0 grid min-w-0 gap-5 sm:gap-7"
             :class="profile.provider === 'xai'
-              ? 'sm:grid-cols-[0.72fr_0.9fr_1.18fr]'
+              ? 'sm:grid-cols-[0.62fr_1.28fr_0.94fr]'
               : 'sm:grid-cols-[0.72fr_1.28fr]'"
           >
             <div v-if="profile.provider === 'xai'" class="min-w-0">