From 9ea62fab04c080885e419e13567120823ca7e63a Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 19 Feb 2026 16:51:57 -0800
Subject: [PATCH] style(ui/): fix styling

---
 .../GuardrailsMonitor/GuardrailsOverview.tsx         | 12 ++++++------
 .../src/components/GuardrailsMonitor/MetricCard.tsx  |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
index 7cff8aae19c..e18bc987fb2 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
@@ -299,11 +299,11 @@ export function GuardrailsOverview({ onSelectGuardrail }: GuardrailsOverviewProp
         </button>
       </div>
 
-      <Grid numItems={2} numItemsLg={5} className="gap-4 mb-6">
-        <Col>
+      <Grid numItems={2} numItemsLg={5} className="gap-4 mb-6 items-stretch">
+        <Col className="flex flex-col">
           <MetricCard label="Total Requests Evaluated" value={metrics.totalRequests.toLocaleString()} />
         </Col>
-        <Col>
+        <Col className="flex flex-col">
           <MetricCard
             label="Blocked Requests"
             value={metrics.totalBlocked.toLocaleString()}
@@ -311,7 +311,7 @@ export function GuardrailsOverview({ onSelectGuardrail }: GuardrailsOverviewProp
             icon={<WarningOutlined className="text-red-400" />}
           />
         </Col>
-        <Col>
+        <Col className="flex flex-col">
           <MetricCard
             label="Pass Rate"
             value={`${metrics.passRate}%`}
@@ -319,7 +319,7 @@ export function GuardrailsOverview({ onSelectGuardrail }: GuardrailsOverviewProp
             icon={<RiseOutlined className="text-green-400" />}
           />
         </Col>
-        <Col>
+        <Col className="flex flex-col">
           <MetricCard
             label="Avg. latency added"
             value={`${metrics.avgLatency}ms`}
@@ -333,7 +333,7 @@ export function GuardrailsOverview({ onSelectGuardrail }: GuardrailsOverviewProp
             subtitle={`p95: ${metrics.p95Latency}ms`}
           />
         </Col>
-        <Col>
+        <Col className="flex flex-col">
           <MetricCard
             label={isGuardrails ? "Active Guardrails" : "Active Policies"}
             value={metrics.count}
diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx
index 16bab0df140..4a11efe72ab 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx
@@ -16,7 +16,7 @@ export function MetricCard({
   subtitle,
 }: MetricCardProps) {
   return (
-    <div className="bg-white border border-gray-200 rounded-lg p-5">
+    <div className="h-full bg-white border border-gray-200 rounded-lg p-5 flex flex-col">
       <div className="flex items-center justify-between mb-1">
         <span className="text-sm font-medium text-gray-600">{label}</span>
         {icon && <span className="text-gray-400">{icon}</span>}