From ab77db5a906b5b29a5ffa7ae3f3ccf7b79a7a0ea Mon Sep 17 00:00:00 2001
From: jgor20 <102353650+jgor20@users.noreply.github.com>
Date: Sun, 11 Jan 2026 12:43:45 +0000
Subject: [PATCH] fix(ui): enhance dashboard quota chart responsiveness and
 layout

---
 public/views/dashboard.html | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/public/views/dashboard.html b/public/views/dashboard.html
index 61c11f5..9539db2 100644
--- a/public/views/dashboard.html
+++ b/public/views/dashboard.html
@@ -157,9 +157,9 @@
 
         <!-- Global Quota Chart -->
         <div
-            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-3 lg:p-4 h-full flex flex-row sm:flex-col xl:flex-row items-center sm:items-start xl:items-center justify-between gap-3 overflow-hidden relative group hover:border-space-border/60 transition-colors col-span-2 sm:col-span-1 min-w-0">
+            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-3 xl:p-4 h-full flex flex-row sm:flex-col items-center justify-between gap-2 overflow-hidden relative group hover:border-space-border/60 transition-colors col-span-2 sm:col-span-1 min-w-0">
             <!-- Chart Container -->
-            <div class="h-14 w-14 lg:h-16 lg:w-16 relative flex-shrink-0 self-center sm:self-auto xl:self-center">
+            <div class="h-14 w-14 xl:h-16 xl:w-16 relative flex-shrink-0 self-center">
                 <canvas id="quotaChart"></canvas>
                 <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                     <div class="text-[10px] font-bold text-white font-mono" x-text="stats.overallHealth + '%'">%</div>
@@ -167,32 +167,34 @@
             </div>
 
             <!-- Legend / Info -->
-            <div class="flex flex-col justify-center gap-1 flex-grow min-w-0 w-full">
-                <div class="flex items-center justify-between">
-                    <span class="text-[10px] text-gray-500 uppercase tracking-wider font-mono truncate"
+            <div class="flex flex-col justify-center gap-1 flex-grow min-w-0 w-full sm:text-center">
+                <div class="flex items-center justify-between sm:justify-center h-full">
+                    <span class="text-[10px] text-gray-500 uppercase font-mono leading-tight whitespace-normal sm:px-1"
                         x-text="$store.global.t('globalQuota')">Global Quota</span>
                 </div>
 
                 <!-- Custom Legend -->
-                <div class="space-y-0.5">
-                    <div class="flex items-center justify-between text-[10px] text-gray-400 cursor-pointer hover:text-neon-purple transition-colors group/legend"
+                <div class="space-y-0.5 sm:flex sm:flex-col sm:items-center w-full">
+                    <div class="flex items-center justify-between sm:justify-center sm:gap-2 text-[10px] text-gray-400 cursor-pointer hover:text-neon-purple transition-colors group/legend w-full sm:w-auto"
                         @click="$store.global.activeTab = 'models'; $nextTick(() => { $store.data.filters.family = 'claude'; $store.data.computeQuotaRows(); })"
                         :title="$store.global.t('clickToFilterClaude')">
-                        <div class="flex items-center gap-1.5 truncate">
+                        <div class="flex items-center gap-1.5">
                             <div class="w-1.5 h-1.5 rounded-full bg-neon-purple flex-shrink-0"></div>
                             <span class="truncate" x-text="$store.global.t('familyClaude')">Claude</span>
-                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <!-- Hidden arrow on desktop/stacked view to save space -->
+                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                             </svg>
                         </div>
                     </div>
-                    <div class="flex items-center justify-between text-[10px] text-gray-400 cursor-pointer hover:text-neon-green transition-colors group/legend"
+                    <div class="flex items-center justify-between sm:justify-center sm:gap-2 text-[10px] text-gray-400 cursor-pointer hover:text-neon-green transition-colors group/legend w-full sm:w-auto"
                         @click="$store.global.activeTab = 'models'; $nextTick(() => { $store.data.filters.family = 'gemini'; $store.data.computeQuotaRows(); })"
                         :title="$store.global.t('clickToFilterGemini')">
-                        <div class="flex items-center gap-1.5 truncate">
+                        <div class="flex items-center gap-1.5">
                             <div class="w-1.5 h-1.5 rounded-full bg-neon-green flex-shrink-0"></div>
                             <span class="truncate" x-text="$store.global.t('familyGemini')">Gemini</span>
-                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <!-- Hidden arrow on desktop/stacked view to save space -->
+                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                             </svg>
                         </div>