From a701f1205993882ca5005fddbb375977e7274738 Mon Sep 17 00:00:00 2001
From: Forgotten <forgottenrunes@protonmail.com>
Date: Wed, 25 Feb 2026 15:06:03 -0600
Subject: [PATCH] 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>
---
 ui/src/components/MetricCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/MetricCard.tsx b/ui/src/components/MetricCard.tsx
index d53b286f..734293d6 100644
--- a/ui/src/components/MetricCard.tsx
+++ b/ui/src/components/MetricCard.tsx
@@ -16,8 +16,8 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
   const isClickable = !!(to || onClick);
 
   const inner = (
-    <Card>
-      <CardContent className="p-3 sm:p-4">
+    <Card className="h-full">
+      <CardContent className="p-3 sm:p-4 h-full">
         <div className="flex gap-2 sm:gap-3">
           <div className="flex-1 min-w-0">
             <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) {
     return (
-      <Link to={to} className="no-underline text-inherit" onClick={onClick}>
+      <Link to={to} className="no-underline text-inherit h-full" onClick={onClick}>
         {inner}
       </Link>
     );
@@ -48,7 +48,7 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
 
   if (onClick) {
     return (
-      <div className="cursor-pointer" onClick={onClick}>
+      <div className="cursor-pointer h-full" onClick={onClick}>
         {inner}
       </div>
     );