scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-24 05:45:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 71

Merge 1bd67cde1d into 82ca10cc2d

Browse source
This commit is contained in:
Gabriele Della Malva 2026-10-17 08:01:46 -07:00 • committed by GitHub
commit aa871051fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx
View file

@ -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();

13
ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
View file

@ -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>
);