From 0562f76b079cf2371e9023c91d226b4ca30b01fa Mon Sep 17 00:00:00 2001
From: Stevennva28 <contact.nva28@gmail.com>
Date: Wed, 13 May 2026 18:21:17 +0700
Subject: [PATCH] Fix dashboard stats card overflow

---
 src/components/dashboard/ChartCard.vue       |  8 +++----
 src/components/dashboard/UpdateStatsCard.vue | 22 ++++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/dashboard/ChartCard.vue b/src/components/dashboard/ChartCard.vue
index d3500b4293..8b00da4320 100644
--- a/src/components/dashboard/ChartCard.vue
+++ b/src/components/dashboard/ChartCard.vue
@@ -56,7 +56,7 @@ const displayNoDataMessage = computed(() => props.noDataMessage ?? t('no-data'))
     <div class="relative overflow-hidden px-5 pt-5">
       <!-- Custom header slot or default header -->
       <div class="flex flex-col gap-4">
-        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div class="min-w-0 flex-1">
             <slot name="header">
               <div class="min-w-0">
@@ -67,7 +67,7 @@ const displayNoDataMessage = computed(() => props.noDataMessage ?? t('no-data'))
             </slot>
           </div>
 
-          <div class="flex items-center gap-2 sm:justify-end">
+          <div class="flex shrink-0 items-center gap-2 sm:justify-end">
             <div
               v-if="showEvolutionBadge"
               class="inline-flex justify-center items-center rounded-full px-3 py-1 text-xs font-bold text-white shadow-sm"
@@ -79,8 +79,8 @@ const displayNoDataMessage = computed(() => props.noDataMessage ?? t('no-data'))
           </div>
         </div>
 
-        <div v-if="total !== undefined" class="flex items-end gap-2">
-          <div class="max-w-full text-3xl font-semibold leading-none tracking-tight break-words text-slate-900 dark:text-white sm:text-4xl">
+        <div v-if="total !== undefined" class="flex min-w-0 flex-wrap items-end gap-x-2 gap-y-1">
+          <div class="min-w-0 max-w-full break-all text-[clamp(1.75rem,3.5vw,2.25rem)] font-semibold leading-none tracking-tight text-slate-900 dark:text-white">
             {{ total?.toLocaleString() }}
           </div>
           <span v-if="unit" class="pb-1 text-sm font-semibold tracking-[0.2em] text-slate-400 uppercase dark:text-slate-500">
diff --git a/src/components/dashboard/UpdateStatsCard.vue b/src/components/dashboard/UpdateStatsCard.vue
index 3e86f6144f..ae54cac4bc 100644
--- a/src/components/dashboard/UpdateStatsCard.vue
+++ b/src/components/dashboard/UpdateStatsCard.vue
@@ -383,39 +383,39 @@ onMounted(async () => {
     :is-demo-data="isDemoMode"
   >
     <template #header>
-      <div class="flex flex-col gap-2 justify-between items-start">
+      <div class="flex min-w-0 flex-col gap-2 justify-between items-start">
         <h2 class="flex-1 min-w-0 text-2xl font-semibold leading-tight dark:text-white text text-slate-600">
           {{ t('update_statistics') }}
         </h2>
-        <div class="flex flex-wrap gap-2 items-center text-xs sm:gap-3 sm:text-sm">
-          <div class="flex gap-2 items-center">
+        <div class="flex min-w-0 max-w-full flex-wrap gap-x-3 gap-y-2 items-center text-xs sm:text-sm">
+          <div class="flex min-w-0 gap-2 items-center">
             <div class="w-3 h-3 rounded-full" style="background-color: hsl(210, 65%, 55%)" />
             <div
               class="flex gap-1 items-center min-w-0 text-xs text-slate-600 dark:text-slate-300 sm:text-sm"
               :aria-label="`${actionDisplayNames.requested}: ${effectiveTotalRequested.toLocaleString()}`"
             >
-              <GlobeAltIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4" aria-hidden="true" />
-              <span>{{ effectiveTotalRequested.toLocaleString() }}</span>
+              <GlobeAltIcon class="w-3.5 h-3.5 shrink-0 sm:w-4 sm:h-4" aria-hidden="true" />
+              <span class="break-all">{{ effectiveTotalRequested.toLocaleString() }}</span>
             </div>
           </div>
-          <div class="flex gap-2 items-center">
+          <div class="flex min-w-0 gap-2 items-center">
             <div class="w-3 h-3 rounded-full" style="background-color: hsl(135, 55%, 50%)" />
             <div
               class="flex gap-1 items-center min-w-0 text-xs text-slate-600 dark:text-slate-300 sm:text-sm"
               :aria-label="`${actionDisplayNames.install}: ${effectiveTotalInstalled.toLocaleString()}`"
             >
-              <ArrowDownOnSquareIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4" aria-hidden="true" />
-              <span>{{ effectiveTotalInstalled.toLocaleString() }}</span>
+              <ArrowDownOnSquareIcon class="w-3.5 h-3.5 shrink-0 sm:w-4 sm:h-4" aria-hidden="true" />
+              <span class="break-all">{{ effectiveTotalInstalled.toLocaleString() }}</span>
             </div>
           </div>
-          <div class="flex gap-2 items-center">
+          <div class="flex min-w-0 gap-2 items-center">
             <div class="w-3 h-3 rounded-full" style="background-color: hsl(0, 50%, 60%)" />
             <div
               class="flex gap-1 items-center min-w-0 text-xs text-slate-600 dark:text-slate-300 sm:text-sm"
               :aria-label="`${actionDisplayNames.fail}: ${effectiveTotalFailed.toLocaleString()}`"
             >
-              <XCircleIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4" aria-hidden="true" />
-              <span>{{ effectiveTotalFailed.toLocaleString() }}</span>
+              <XCircleIcon class="w-3.5 h-3.5 shrink-0 sm:w-4 sm:h-4" aria-hidden="true" />
+              <span class="break-all">{{ effectiveTotalFailed.toLocaleString() }}</span>
             </div>
           </div>
         </div>