From 48aa776032dae7c4a6d25bfb97f49dc60a86f6d8 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Wed, 15 Apr 2026 11:34:44 -0700
Subject: [PATCH] refactor(ui): use antd grid for guardrails monitor metrics

Replace Tailwind grid wrappers with antd Row/Col in Guardrails Monitor overview and detail metric sections to keep layout primitives consistent with the ongoing antd migration.
---
 .../GuardrailsMonitor/GuardrailDetail.tsx     | 18 ++++++-------
 .../GuardrailsMonitor/GuardrailsOverview.tsx  | 26 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx
index 057ff702f0..1f77c8e3db 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx
@@ -5,7 +5,7 @@ import {
   WarningOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Spin, Tabs } from "antd";
+import { Button, Col, Row, Spin, Tabs } from "antd";
 import React, { useMemo, useState } from "react";
 import {
   getGuardrailsUsageDetail,
@@ -171,11 +171,11 @@ export function GuardrailDetail({
 
       {activeTab === "overview" && (
         <div className="space-y-6 mt-4">
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-            <div className="min-w-0">
+          <Row gutter={[16, 16]}>
+            <Col xs={12} md={8}>
               <MetricCard label="Requests Evaluated" value={data.requestsEvaluated.toLocaleString()} />
-            </div>
-            <div className="min-w-0">
+            </Col>
+            <Col xs={12} md={8}>
               <MetricCard
                 label="Fail Rate"
                 value={`${data.failRate}%`}
@@ -185,8 +185,8 @@ export function GuardrailDetail({
                 subtitle={`${Math.round((data.requestsEvaluated * data.failRate) / 100).toLocaleString()} blocked`}
                 icon={data.failRate > 15 ? <WarningOutlined className="text-red-400" /> : undefined}
               />
-            </div>
-            <div className="min-w-0">
+            </Col>
+            <Col xs={12} md={8}>
               <MetricCard
                 label="Avg. latency added"
                 value={data.avgLatency != null ? `${Math.round(data.avgLatency)}ms` : "—"}
@@ -201,8 +201,8 @@ export function GuardrailDetail({
                 }
                 subtitle={data.avgLatency != null ? "Per request (avg)" : "No data"}
               />
-            </div>
-          </div>
+            </Col>
+          </Row>
 
           <LogViewer
             guardrailName={data.name}
diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
index 2437dc6aa2..dabf37a654 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
@@ -6,7 +6,7 @@ import {
   WarningOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Card, Spin, Table, Typography } from "antd";
+import { Button, Card, Col, Row, Spin, Table, Typography } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import React, { useMemo, useState } from "react";
 import { getGuardrailsUsageOverview } from "@/components/networking";
@@ -217,27 +217,27 @@ export function GuardrailsOverview({
         </div>
       </div>
 
-      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6 items-stretch">
-        <div className="flex flex-col min-w-0">
+      <Row gutter={[16, 16]} className="mb-6">
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard label="Total Evaluations" value={metrics.totalRequests.toLocaleString()} />
-        </div>
-        <div className="flex flex-col min-w-0">
+        </Col>
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard
             label="Blocked Requests"
             value={metrics.totalBlocked.toLocaleString()}
             valueColor="text-red-600"
             icon={<WarningOutlined className="text-red-400" />}
           />
-        </div>
-        <div className="flex flex-col min-w-0">
+        </Col>
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard
             label="Pass Rate"
             value={`${metrics.passRate}%`}
             valueColor="text-green-600"
             icon={<RiseOutlined className="text-green-400" />}
           />
-        </div>
-        <div className="flex flex-col min-w-0">
+        </Col>
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard
             label="Avg. latency added"
             value={`${metrics.avgLatency}ms`}
@@ -249,11 +249,11 @@ export function GuardrailsOverview({
                   : "text-green-600"
             }
           />
-        </div>
-        <div className="flex flex-col min-w-0">
+        </Col>
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard label="Active Guardrails" value={metrics.count} />
-        </div>
-      </div>
+        </Col>
+      </Row>
 
       <div className="mb-6">
         <ScoreChart data={chartData} />