From e6fc0dcf1534650cdcdcfd32bdd0f2624c0d4130 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Thu, 11 Dec 2025 22:51:38 +0300
Subject: [PATCH] feat: improve percentage change display with dynamic colors
 and width adjustments.

---
 src/components/dashboard/DashboardCharts.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/dashboard/DashboardCharts.vue b/src/components/dashboard/DashboardCharts.vue
index 940523f..d552cb7 100644
--- a/src/components/dashboard/DashboardCharts.vue
+++ b/src/components/dashboard/DashboardCharts.vue
@@ -199,14 +199,15 @@ const weeklyChartOptions = computed(() => {
 
                       </div>
                       <div
-                        class="flex items-center text-sm gap-1 text-surface-500 dark:text-surface-400 w-10 text-right">
+                        class="flex items-center text-sm gap-1 text-surface-500 dark:text-surface-400 w-10 text-right !w-full">
                         <div class="flex items-center gap-0">
                           <span>{{ category.percentage }}</span>
                           <span class="ml-0.5">%</span>
                         </div>
-                        <span class="text-xs text-surface-500 dark:text-surface-400 ml-1">({{
-                          category.changeDiffPercentage > 0 ? '+' : category.changeDiffPercentage < 0 ? '-' : '' +
-                            Math.round(category.changeDiffPercentage) }})</span>
+                        <span class="text-xs  ml-1 !w-fit"
+                          :class="category.changeDiffPercentage > 0 ? 'text-red-500' : 'text-green-500'">({{
+                            (category.changeDiffPercentage > 0 ? '+' : '') + Math.round(category.changeDiffPercentage)
+                          }}%)</span>
 
                       </div>
                     </div>