From 03d537328a71374c6305e1b761926b2b2dbd9742 Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Tue, 12 May 2026 16:13:14 +0800
Subject: [PATCH] fix(default): improve performance health panel layout

---
 .../overview/performance-health-panel.tsx     | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx b/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
index bfe0f500..bcbe3e1b 100644
--- a/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
+++ b/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
@@ -103,8 +103,7 @@ export function PerformanceHealthPanel() {
         </span>
       </div>
 
-      <div className='grid gap-3 p-4 sm:p-5 lg:grid-cols-[minmax(0,1fr)_14rem]'>
-        {/* KPI metrics */}
+      <div className='space-y-3 p-4 sm:p-5'>
         <div className='grid grid-cols-3 gap-2'>
           <MetricCell
             icon={HeartPulse}
@@ -127,23 +126,18 @@ export function PerformanceHealthPanel() {
           />
         </div>
 
-        {/* Top models */}
-        <div className='flex flex-col'>
-          <span className='text-muted-foreground mb-1 text-[11px] font-medium'>
-            {t('Top models by traffic')}
-          </span>
-          {loading ? (
-            <div className='space-y-1'>
-              {Array.from({ length: 3 }).map((_, i) => (
-                <Skeleton key={i} className='h-5 w-full rounded' />
-              ))}
-            </div>
-          ) : !hasData ? (
-            <span className='text-muted-foreground/60 text-xs'>
-              {t('No performance data available')}
+        {loading ? (
+          <div className='space-y-1'>
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton key={i} className='h-5 w-full rounded' />
+            ))}
+          </div>
+        ) : hasData && (
+          <div>
+            <span className='text-muted-foreground mb-1 block text-[11px] font-medium'>
+              {t('Top models by traffic')}
             </span>
-          ) : (
-            <div className='space-y-0.5'>
+            <div className='grid grid-cols-1 gap-x-4 sm:grid-cols-2'>
               {topModels.map((model) => (
                 <div
                   key={model.model_name}
@@ -169,8 +163,8 @@ export function PerformanceHealthPanel() {
                 </div>
               ))}
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </section>
   )