From 3ebd18b057cc3ea301c3a001ed0e693bc019b61e Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 22:37:02 +0000
Subject: [PATCH] fix(ui): stack policy flow builder below the popup layer so
 guardrail options render

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../pipeline_flow_builder.test.tsx            | 23 ++++++++++++++++++-
 .../_components/pipeline_flow_builder.tsx     |  2 +-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx
index 59bd63fd0ed..3af5b31c41f 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 import { fireEvent, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "@/../tests/test-utils";
-import PipelineFlowBuilder, { PipelineInfoDisplay } from "./pipeline_flow_builder";
+import PipelineFlowBuilder, { FlowBuilderPage, PipelineInfoDisplay } from "./pipeline_flow_builder";
 import { GuardrailPipeline, PipelineStep } from "@/components/policies/types";
 import { Guardrail } from "@/components/guardrails/types";
 
@@ -167,3 +167,24 @@ describe("PipelineFlowBuilder", () => {
     expect(screen.getAllByRole("combobox").length).toBeGreaterThan(0);
   });
 });
+
+describe("FlowBuilderPage", () => {
+  it("stacks its full-screen shell below the portalled popup layer", () => {
+    const portalLayerZIndex = 50;
+    const { container } = renderWithProviders(
+      <FlowBuilderPage
+        onBack={vi.fn()}
+        onSuccess={vi.fn()}
+        accessToken="sk-test"
+        availableGuardrails={guardrails}
+        createPolicy={vi.fn()}
+        updatePolicy={vi.fn()}
+      />,
+    );
+
+    const shell = container.firstElementChild as HTMLElement;
+
+    expect(shell).toHaveStyle({ position: "fixed" });
+    expect(Number(shell.style.zIndex)).toBeLessThan(portalLayerZIndex);
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx
index 8af8ac7a414..c649bb4844b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx
@@ -1631,7 +1631,7 @@ export const FlowBuilderPage: React.FC<FlowBuilderPageProps> = ({
         right: 0,
         bottom: 0,
         backgroundColor: "var(--color-muted)",
-        zIndex: 1000,
+        zIndex: 40,
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",