From 1a3236f6506ffba87d65308a99b4cc0653b0d0ad Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Sat, 6 Jun 2026 21:44:07 +0300
Subject: [PATCH] fix(cabinet): equal-height StatCards so dashboard
 balance/referral align
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In a grid, the wrapping <Link> stretched to the row height but the
StatCard inside only took content height, so the referral card (which has
a subValue line) rendered taller than the balance card ('один толще
другого'). Make StatCard fill its cell with h-full and stretch the
StatsGrid links. Verified by rendering both cards against the built CSS:
balance 86px->94px, now equal to referral's 94px.
---
 src/components/dashboard/StatsGrid.tsx | 4 ++--
 src/components/stats/StatCard.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dashboard/StatsGrid.tsx b/src/components/dashboard/StatsGrid.tsx
index 7701566..79d280f 100644
--- a/src/components/dashboard/StatsGrid.tsx
+++ b/src/components/dashboard/StatsGrid.tsx
@@ -24,7 +24,7 @@ export default function StatsGrid({
 
   return (
     <div className="grid grid-cols-2 gap-2.5">
-      <Link to="/balance" className="block" data-onboarding="balance">
+      <Link to="/balance" className="block h-full" data-onboarding="balance">
         <StatCard
           label={t('dashboard.stats.balance')}
           value={`${formatAmount(balanceRubles)} ${currencySymbol}`}
@@ -33,7 +33,7 @@ export default function StatsGrid({
           trailing={chevron}
         />
       </Link>
-      <Link to="/referral" className="block">
+      <Link to="/referral" className="block h-full">
         <StatCard
           label={t('dashboard.stats.referrals')}
           value={`${referralCount}`}
diff --git a/src/components/stats/StatCard.tsx b/src/components/stats/StatCard.tsx
index 99ebded..8a52793 100644
--- a/src/components/stats/StatCard.tsx
+++ b/src/components/stats/StatCard.tsx
@@ -50,7 +50,7 @@ export function StatCard({
   const trendStyle = delta ? (TREND_STYLES[delta.trend] ?? TREND_STYLES.stable) : null;
 
   return (
-    <div className="rounded-xl bg-dark-800/30 p-3 transition-colors hover:bg-dark-800/50">
+    <div className="h-full rounded-xl bg-dark-800/30 p-3 transition-colors hover:bg-dark-800/50">
       <div className="flex items-center justify-between gap-2">
         <span className="truncate text-xs text-dark-500 sm:text-sm">{label}</span>
         {trailing}