fix(ui): ensure dashboard metric cards have equal height
Add h-full to MetricCard wrapper elements (Link, div, Card, CardContent) so CSS grid row stretching propagates through all layers, preventing cards with longer descriptions from being taller than siblings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -16,8 +16,8 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
|
|||||||
const isClickable = !!(to || onClick);
|
const isClickable = !!(to || onClick);
|
||||||
|
|
||||||
const inner = (
|
const inner = (
|
||||||
<Card>
|
<Card className="h-full">
|
||||||
<CardContent className="p-3 sm:p-4">
|
<CardContent className="p-3 sm:p-4 h-full">
|
||||||
<div className="flex gap-2 sm:gap-3">
|
<div className="flex gap-2 sm:gap-3">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className={`text-lg sm:text-2xl font-bold${isClickable ? " cursor-pointer" : ""}`}>
|
<p className={`text-lg sm:text-2xl font-bold${isClickable ? " cursor-pointer" : ""}`}>
|
||||||
@@ -40,7 +40,7 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
|
|||||||
|
|
||||||
if (to) {
|
if (to) {
|
||||||
return (
|
return (
|
||||||
<Link to={to} className="no-underline text-inherit" onClick={onClick}>
|
<Link to={to} className="no-underline text-inherit h-full" onClick={onClick}>
|
||||||
{inner}
|
{inner}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
@@ -48,7 +48,7 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
|
|||||||
|
|
||||||
if (onClick) {
|
if (onClick) {
|
||||||
return (
|
return (
|
||||||
<div className="cursor-pointer" onClick={onClick}>
|
<div className="cursor-pointer h-full" onClick={onClick}>
|
||||||
{inner}
|
{inner}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user