From 790077bd8f9b46d2eafa0f5b2873e149f9e4431b Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 29 Mar 2024 10:00:47 +0530
Subject: [PATCH] update component

---
 .../settings/reports/components/SLA/SLAMetricCard.vue     | 8 +++-----
 .../settings/reports/components/SLA/SLAMetrics.vue        | 6 ++++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index ff808622a..ae96790f9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -18,7 +18,7 @@ defineProps({
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
-      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+      class="inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-200 font-medium"
     >
       {{ label }}
       <fluent-icon
@@ -26,12 +26,10 @@ defineProps({
         size="14"
         icon="information"
         type="outline"
-        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
       />
     </span>
-    <span
-      class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
-    >
+    <span class="text-2xl font-medium text-slate-900 dark:text-slate-25">
       {{ value }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 848ea081c..b2d89ad04 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -14,14 +14,16 @@ defineProps({
 
 <template>
   <div
-    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
+    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
   >
     <SLA-metric-card
       :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
       :value="hitRate"
       :tool-tip="$t('SLA_REPORTS.METRICS.HIT_RATE.TOOLTIP')"
     />
-    <div class="w-px h-full border border-slate-75 dark:border-slate-700/50" />
+    <div
+      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
+    />
     <SLAMetricCard
       label="No of Breaches"
       :value="noOfBreaches"