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>

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);
+  });
+});

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",