etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(cabinet): equal-height StatCards so dashboard balance/referral align

Browse Source 
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.
This commit is contained in:
c0mrade
2026-06-06 21:44:07 +03:00
parent 3b48abbb7b
commit 1a3236f650
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/dashboard/StatsGrid.tsx
View File

@@ -24,7 +24,7 @@ export default function StatsGrid({
return ( return (
<div className="grid grid-cols-2 gap-2.5"> <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 <StatCard
label={t('dashboard.stats.balance')} label={t('dashboard.stats.balance')}
value={`${formatAmount(balanceRubles)} ${currencySymbol}`} value={`${formatAmount(balanceRubles)} ${currencySymbol}`}
@@ -33,7 +33,7 @@ export default function StatsGrid({
trailing={chevron} trailing={chevron}
/> />
</Link> </Link>
<Link to="/referral" className="block"> <Link to="/referral" className="block h-full">
<StatCard <StatCard
label={t('dashboard.stats.referrals')} label={t('dashboard.stats.referrals')}
value={`${referralCount}`} value={`${referralCount}`}

2
src/components/stats/StatCard.tsx
View File

@@ -50,7 +50,7 @@ export function StatCard({
const trendStyle = delta ? (TREND_STYLES[delta.trend] ?? TREND_STYLES.stable) : null; const trendStyle = delta ? (TREND_STYLES[delta.trend] ?? TREND_STYLES.stable) : null;
return ( 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"> <div className="flex items-center justify-between gap-2">
<span className="truncate text-xs text-dark-500 sm:text-sm">{label}</span> <span className="truncate text-xs text-dark-500 sm:text-sm">{label}</span>
{trailing} {trailing}