diff --git a/ui/components/auth/oss/auth-layout.test.tsx b/ui/components/auth/oss/auth-layout.test.tsx
index 608bdece88..baf504cc58 100644
--- a/ui/components/auth/oss/auth-layout.test.tsx
+++ b/ui/components/auth/oss/auth-layout.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { AuthLayout } from "./auth-layout";
+import { PublicAuthShell } from "./public-auth-shell";
vi.mock("@/components/ThemeSwitch", () => ({
ThemeSwitch: () => ,
@@ -26,4 +27,45 @@ describe("AuthLayout", () => {
screen.queryByRole("button", { name: "Auth card theme toggle" }),
).not.toBeInTheDocument();
});
+
+ it("renders the brand in the centered auth layout flow above the card", () => {
+ // Given
+ const title = "Sign in to Prowler";
+
+ // When
+ render(
+
+
+ ,
+ );
+
+ // Then
+ const brand = screen.getByRole("img", { name: /prowler/i });
+ const brandWrapper = brand.parentElement;
+ const cardTitle = screen.getByText(title);
+
+ expect(brand).toBeVisible();
+ expect(brandWrapper).toHaveClass("relative", "z-10", "mb-8", "w-[200px]");
+ expect(brandWrapper).not.toHaveClass("absolute", "top-8");
+ expect(brand.compareDocumentPosition(cardTitle)).toBe(
+ Node.DOCUMENT_POSITION_FOLLOWING,
+ );
+ });
+});
+
+describe("PublicAuthShell", () => {
+ it("does not render a shell-level absolute brand", () => {
+ // Given / When
+ render(
+
+ Auth page
+ ,
+ );
+
+ // Then
+ expect(
+ screen.queryByRole("img", { name: /prowler/i }),
+ ).not.toBeInTheDocument();
+ expect(screen.getByText("Auth page")).toBeVisible();
+ });
});
diff --git a/ui/components/auth/oss/auth-layout.tsx b/ui/components/auth/oss/auth-layout.tsx
index 1d0962262e..c03695dba9 100644
--- a/ui/components/auth/oss/auth-layout.tsx
+++ b/ui/components/auth/oss/auth-layout.tsx
@@ -1,5 +1,7 @@
import { ReactNode } from "react";
+import { ProwlerBrand } from "@/components/icons";
+
interface AuthLayoutProps {
title: string;
children: ReactNode;
@@ -18,6 +20,10 @@ export const AuthLayout = ({ title, children }: AuthLayoutProps) => {
}}
>
+
+
{/* Auth Form Container */}
{/* Header */}
diff --git a/ui/components/auth/oss/public-auth-shell.tsx b/ui/components/auth/oss/public-auth-shell.tsx
index 372d2d866a..2752ec7cc6 100644
--- a/ui/components/auth/oss/public-auth-shell.tsx
+++ b/ui/components/auth/oss/public-auth-shell.tsx
@@ -1,18 +1,9 @@
import type { ReactNode } from "react";
-import { ProwlerBrand } from "@/components/icons";
-
interface PublicAuthShellProps {
children: ReactNode;
}
export const PublicAuthShell = ({ children }: PublicAuthShellProps) => {
- return (
-
- );
+ return
{children}
;
};