test(ui): assert the resolved checkbox layout, not just data-orientation

The invite-dialog test only read data-orientation, so a regression inside
the shared field variants could restore the full-width bar and still pass.
Assert the classes that carry the layout, cover the two SSO call sites the
fix also changed, and pin the vertical/horizontal contract on the primitive.

ui/litellm-dashboard/src/components/CreateUserButton.test.tsx

@@ -5,6 +5,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { CreateUserButton } from "./CreateUserButton";
 import * as networking from "./networking";
 import { toast } from "@/lib/toast";
+import { expectControlBesideLabel } from "../../tests/fieldOrientation";
 
 vi.mock("./networking", () => ({
   userCreateCall: vi.fn(),
@@ -304,9 +305,8 @@ describe("CreateUserButton", () => {
     await user.click(screen.getByRole("button", { name: /\+ invite user/i }));
 
     const dialog = screen.getByRole("dialog", { name: /invite user/i });
-    const checkbox = within(dialog).getByRole("checkbox");
 
-    expect(checkbox.closest('[data-slot="field"]')).toHaveAttribute("data-orientation", "horizontal");
+    expectControlBesideLabel(within(dialog).getByRole("checkbox"));
   });
 
   describe("organizations", () => {

ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.test.tsx

@@ -9,6 +9,7 @@ import BaseSSOSettingsForm, {
   submitMountedSSOValues,
   useSSOSettingsForm,
 } from "./BaseSSOSettingsForm";
+import { expectControlBesideLabel } from "../../../../../../tests/fieldOrientation";
 
 const user = () => userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -233,6 +234,38 @@ describe("BaseSSOSettingsForm", () => {
 
     expect(screen.queryByText("Use Team Mappings")).not.toBeInTheDocument();
   });
+
+  it("lays a provider checkbox field out beside its label", async () => {
+    const TestWrapper = () => {
+      const form = useSSOSettingsForm("sso-settings");
+
+      return <BaseSSOSettingsForm form={form} onFormSubmit={vi.fn()} />;
+    };
+
+    renderWithProviders(<TestWrapper />);
+
+    await openProviderDropdown();
+    await user().click(await screen.findByText(/saml sso/i));
+
+    expectControlBesideLabel(
+      await screen.findByRole("checkbox", { name: "Allow IdP-initiated (unsolicited) responses" }),
+    );
+  });
+
+  it.each(["Use Role Mappings", "Use Team Mappings"])("lays the %s toggle out beside its label", async (label) => {
+    const TestWrapper = () => {
+      const form = useSSOSettingsForm("sso-settings");
+
+      return <BaseSSOSettingsForm form={form} onFormSubmit={vi.fn()} />;
+    };
+
+    renderWithProviders(<TestWrapper />);
+
+    await openProviderDropdown();
+    await user().click(await screen.findByText(/okta/i));
+
+    expectControlBesideLabel(await screen.findByRole("checkbox", { name: label }));
+  });
 });
 
 describe("renderProviderFields", () => {

ui/litellm-dashboard/src/components/ui/field.test.tsx

@@ -14,6 +14,7 @@ import {
   FieldSet,
   FieldTitle,
 } from "./field";
+import { ROW_LAYOUT_CLASSES, STRETCH_CHILDREN_CLASS } from "../../../tests/fieldOrientation";
 
 describe("FieldError", () => {
   it("renders nothing when there are no errors and no children", () => {
@@ -85,6 +86,20 @@ describe("Field", () => {
 
     expect(screen.getByRole("group")).toHaveAttribute("data-orientation", "horizontal");
   });
+
+  it("stretches every child when vertical, which is what inputs, selects and textareas want", () => {
+    render(<Field />);
+
+    expect(screen.getByRole("group")).toHaveClass("flex-col", STRETCH_CHILDREN_CLASS);
+  });
+
+  it("lays children in a row at their own width when horizontal, so a checkbox stays square", () => {
+    render(<Field orientation="horizontal" />);
+    const field = screen.getByRole("group");
+
+    expect(field).toHaveClass(...ROW_LAYOUT_CLASSES);
+    expect(field).not.toHaveClass(STRETCH_CHILDREN_CLASS);
+  });
 });
 
 describe("field primitives forward refs to their DOM node", () => {

ui/litellm-dashboard/tests/fieldOrientation.ts

@@ -0,0 +1,18 @@
+import { expect } from "vitest";
+
+export const ROW_LAYOUT_CLASSES = ["flex-row", "items-center"] as const;
+export const STRETCH_CHILDREN_CLASS = "*:w-full";
+
+/**
+ * Asserts a control sits beside its label at its own width instead of being stretched across the
+ * field. Reaches for the resolved classes because the defect is purely visual: nothing accessible
+ * distinguishes a square checkbox from a full-width bar.
+ */
+export const expectControlBesideLabel = (control: HTMLElement): void => {
+  const field = control.closest('[data-slot="field"]');
+  if (field === null) throw new Error("control is not rendered inside a form field");
+
+  expect(field).toHaveAttribute("data-orientation", "horizontal");
+  expect(field).toHaveClass(...ROW_LAYOUT_CLASSES);
+  expect(field).not.toHaveClass(STRETCH_CHILDREN_CLASS);
+};