From 433fdc7df62a250ee1427e0a671421dfaf33d5ff Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaan@berri.ai>
Date: Thu, 23 Apr 2026 15:52:52 -0700
Subject: [PATCH] fix(guardrail-viewer): stack lifecycle + eval details
 vertically to avoid badge overflow in narrow drawer

---
 .../view_logs/GuardrailViewer/GuardrailViewer.tsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
index 5608e3677fa..cfa192db5a7 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
@@ -733,15 +733,15 @@ const GuardrailViewer = ({ data, accessToken, logEntry }: GuardrailViewerProps)
         </div>
       )}
 
-      {/* ── Body: two columns ──────────────────────────────────── */}
-      <div className="flex">
-        {/* Left column: Request Lifecycle */}
-        <div className="w-[340px] flex-shrink-0 border-r border-gray-100 px-6 py-5">
+      {/* ── Body: stacked ──────────────────────────────────────── */}
+      <div className="flex flex-col">
+        {/* Request Lifecycle */}
+        <div className="border-b border-gray-100 px-6 py-5">
           <RequestLifecycle entries={guardrailEntries} />
         </div>
 
-        {/* Right column: Evaluation Details */}
-        <div className="flex-1 px-6 py-5 min-w-0">
+        {/* Evaluation Details */}
+        <div className="px-6 py-5">
           <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">
             Evaluation Details
           </h4>