From 8f3724f2506c451fa24a7ead8e70b6999071eaaf Mon Sep 17 00:00:00 2001
From: Gabriele Della Malva <gabrieledellamalva06@gmail.com>
Date: Sat, 10 Oct 2026 00:15:21 +0200
Subject: [PATCH 1/4] fix(ui): contain guardrail wizard content on narrow
 viewports

---
 .../guardrails/_components/add_guardrail_form.tsx         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
index 098245fa34b..0540522376b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
@@ -1134,11 +1134,11 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
   return (
     <Dialog open={visible} onOpenChange={(open) => !open && handleClose()} disablePointerDismissal>
       <DialogContent
-        className="top-8 max-h-[calc(100dvh-4rem)] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-[1000px]"
+        className="top-8 max-h-[calc(100dvh-4rem)] w-[calc(100vw-2rem)] max-w-[1000px] translate-y-0 gap-0 overflow-hidden p-0"
         showCloseButton={false}
       >
         <TooltipProvider>
-          <div className="flex flex-col">
+          <div className="flex min-h-0 min-w-0 flex-col">
             {/* Header */}
             <div className="flex items-center justify-between border-b border-border px-6 py-4">
               <DialogTitle className="m-0 text-base font-semibold text-foreground">Create guardrail</DialogTitle>
@@ -1152,7 +1152,7 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
             </div>
 
             {/* Scrollable content - inline vertical stepper */}
-            <div className="max-h-[calc(80vh-120px)] overflow-auto px-6 py-4">
+            <div className="min-w-0 max-w-full max-h-[calc(80vh-120px)] overflow-x-auto overflow-y-auto px-4 py-4 sm:px-6">
               <form onSubmit={(event) => event.preventDefault()}>
                 {stepConfigs.map((step, index) => {
                   const isDone = index < currentStep;
@@ -1187,7 +1187,7 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
                         </div>
 
                         {/* Expanded form content for current step */}
-                        {isCurrent && <div className="mt-3">{renderStepContent()}</div>}
+                        {isCurrent && <div className="mt-3 min-w-0 max-w-full overflow-x-auto">{renderStepContent()}</div>}
                       </div>
                     </div>
                   );

From 685ca4af70fa3712722ff10af2161151f0535057 Mon Sep 17 00:00:00 2001
From: Gabriele Della Malva <gabrieledellamalva06@gmail.com>
Date: Sat, 10 Oct 2026 00:15:32 +0200
Subject: [PATCH 2/4] test(ui): guardrail modal constrains content width and
 scrolling

---
 .../_components/add_guardrail_form.test.tsx          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx
index 8ca4aba91c5..73182fd9e8e 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx
@@ -22,6 +22,18 @@ describe("AddGuardrailForm close behavior", () => {
     vi.clearAllMocks();
   });
 
+  it("keeps the wizard bounded and scrollable on narrow viewports", () => {
+    renderForm();
+
+    const dialog = screen.getByText("Create guardrail").closest('[data-slot="dialog-content"]');
+    expect(dialog).toHaveClass("max-w-[1000px]");
+    expect(dialog).toHaveClass("w-[calc(100vw-2rem)]");
+
+    const scrollRegion = dialog?.querySelector(".overflow-x-auto.overflow-y-auto");
+    expect(scrollRegion).not.toBeNull();
+    expect(scrollRegion).toHaveClass("max-w-full");
+  });
+
   it("does not close when the user clicks outside the modal on the mask", () => {
     const { onClose } = renderForm();
     expect(screen.getByText("Create guardrail")).toBeInTheDocument();

From 4242c9485d2ec2db86e71cc95487a794ac07a6d7 Mon Sep 17 00:00:00 2001
From: Gabriele Della Malva <gabrieledellamalva06@gmail.com>
Date: Sat, 10 Oct 2026 00:30:21 +0200
Subject: [PATCH 3/4] style(ui): format guardrail wizard layout and mark scroll
 region

---
 .../guardrails/_components/add_guardrail_form.tsx        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
index 0540522376b..21eb80ba29a 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
@@ -1152,7 +1152,10 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
             </div>
 
             {/* Scrollable content - inline vertical stepper */}
-            <div className="min-w-0 max-w-full max-h-[calc(80vh-120px)] overflow-x-auto overflow-y-auto px-4 py-4 sm:px-6">
+            <div
+              data-testid="guardrail-wizard-scroll-region"
+              className="min-w-0 max-w-full max-h-[calc(80vh-120px)] overflow-x-auto overflow-y-auto px-4 py-4 sm:px-6"
+            >
               <form onSubmit={(event) => event.preventDefault()}>
                 {stepConfigs.map((step, index) => {
                   const isDone = index < currentStep;
@@ -1187,7 +1190,9 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
                         </div>
 
                         {/* Expanded form content for current step */}
-                        {isCurrent && <div className="mt-3 min-w-0 max-w-full overflow-x-auto">{renderStepContent()}</div>}
+                        {isCurrent && (
+                          <div className="mt-3 min-w-0 max-w-full overflow-x-auto">{renderStepContent()}</div>
+                        )}
                       </div>
                     </div>
                   );

From 1bd67cde1dffbf1e8ee2e38e8eff1a48b792c058 Mon Sep 17 00:00:00 2001
From: Gabriele Della Malva <gabrieledellamalva06@gmail.com>
Date: Sat, 10 Oct 2026 00:30:25 +0200
Subject: [PATCH 4/4] test(ui): select accessible dialog and scroll region
 without DOM traversal

---
 .../guardrails/_components/add_guardrail_form.test.tsx     | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx
index 73182fd9e8e..8e88e72bb40 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx
@@ -25,13 +25,12 @@ describe("AddGuardrailForm close behavior", () => {
   it("keeps the wizard bounded and scrollable on narrow viewports", () => {
     renderForm();
 
-    const dialog = screen.getByText("Create guardrail").closest('[data-slot="dialog-content"]');
+    const dialog = screen.getByRole("dialog");
     expect(dialog).toHaveClass("max-w-[1000px]");
     expect(dialog).toHaveClass("w-[calc(100vw-2rem)]");
 
-    const scrollRegion = dialog?.querySelector(".overflow-x-auto.overflow-y-auto");
-    expect(scrollRegion).not.toBeNull();
-    expect(scrollRegion).toHaveClass("max-w-full");
+    const scrollRegion = screen.getByTestId("guardrail-wizard-scroll-region");
+    expect(scrollRegion).toHaveClass("max-w-full", "overflow-x-auto", "overflow-y-auto");
   });
 
   it("does not close when the user clicks outside the modal on the mask", () => {