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..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
@@ -22,6 +22,17 @@ describe("AddGuardrailForm close behavior", () => {
     vi.clearAllMocks();
   });
 
+  it("keeps the wizard bounded and scrollable on narrow viewports", () => {
+    renderForm();
+
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toHaveClass("max-w-[1000px]");
+    expect(dialog).toHaveClass("w-[calc(100vw-2rem)]");
+
+    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", () => {
     const { onClose } = renderForm();
     expect(screen.getByText("Create guardrail")).toBeInTheDocument();
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 b1d5c6d8929..f4f40ed2c37 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
@@ -1243,11 +1243,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>
@@ -1261,7 +1261,10 @@ 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
+              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;
@@ -1296,7 +1299,9 @@ 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>
                   );