From 4772b043aea4126c6ef265ea31d5df8ea8d05fdd Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 21 Aug 2026 16:04:57 +0800
Subject: [PATCH] fix: keep KPI amounts on one line

---
 src/lib/components/AnalyticsPage.svelte | 10 ++++++++--
 src/lib/components/KpiCard.svelte       |  4 +++-
 src/lib/format.ts                       |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/AnalyticsPage.svelte b/src/lib/components/AnalyticsPage.svelte
index 873b004..9387fff 100644
--- a/src/lib/components/AnalyticsPage.svelte
+++ b/src/lib/components/AnalyticsPage.svelte
@@ -139,7 +139,7 @@
   {@const peers = run.sections.peerComparison}
 
   {#if kind === 'overview' && overview.state === 'READY'}
-    <div class="grid gap-3 min-[600px]:grid-cols-2 sm:gap-4 lg:grid-cols-4">
+    <div class="kpi-grid grid gap-3 sm:gap-4">
       <KpiCard
         label="پرداخت موفق"
         value={formatValue(overview.data.bankPaidSessions.value)}
@@ -219,7 +219,7 @@
       performance.data.bankPaidSessions.value +
       performance.data.failedSessions.value +
       performance.data.noAttemptSessions.value}
-    <div class="grid gap-3 min-[600px]:grid-cols-2 sm:gap-4 lg:grid-cols-4">
+    <div class="kpi-grid grid gap-3 sm:gap-4">
       <KpiCard
         label="رسیده به بانک"
         value={formatValue(performance.data.reachedBankSessions.value)}
@@ -390,3 +390,9 @@
     >
   {/if}
 {/if}
+
+<style>
+  .kpi-grid {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+  }
+</style>
diff --git a/src/lib/components/KpiCard.svelte b/src/lib/components/KpiCard.svelte
index bfe8852..f85af5c 100644
--- a/src/lib/components/KpiCard.svelte
+++ b/src/lib/components/KpiCard.svelte
@@ -33,7 +33,9 @@
       </div>
       <Icon class={iconClass} strokeWidth={1.8} />
     </div>
-    <p class="text-2xl font-extrabold tracking-tight tabular-nums">{value}</p>
+    <p class="text-[clamp(1.25rem,2vw,1.5rem)] font-extrabold tracking-tight whitespace-nowrap tabular-nums">
+      {value}
+    </p>
     <p class="text-muted-foreground mt-1.5 text-xs leading-5 sm:mt-2 sm:leading-6">{note}</p>
   </CardContent>
 </Card>
diff --git a/src/lib/format.ts b/src/lib/format.ts
index 8ffc1e8..a75a13a 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -11,7 +11,7 @@ export function formatValue(value: number): string {
 }
 
 export function formatMoney(value: number): string {
-  return `${number.format(value)} ریال`;
+  return `${number.format(value)}\u00a0ریال`;
 }
 
 export function formatPercent(value: string | null): string {