fix: keep KPI amounts on one line

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>

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>

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 {