From 0057d867f6b381882e371f28cc5a30865a533644 Mon Sep 17 00:00:00 2001
From: "Hugo P.Brito" <hugopbrit@gmail.com>
Date: Thu, 16 Jul 2026 14:50:14 +0100
Subject: [PATCH] fix(ui): center auth logo

---
 ui/components/auth/oss/auth-layout.test.tsx  | 42 ++++++++++++++++++++
 ui/components/auth/oss/auth-layout.tsx       |  6 +++
 ui/components/auth/oss/public-auth-shell.tsx | 11 +----
 3 files changed, 49 insertions(+), 10 deletions(-)

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: () => <button type="button">Auth card theme toggle</button>,
@@ -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(
+      <AuthLayout title={title}>
+        <form aria-label="Sign in form">Form content</form>
+      </AuthLayout>,
+    );
+
+    // 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(
+      <PublicAuthShell>
+        <main>Auth page</main>
+      </PublicAuthShell>,
+    );
+
+    // 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) => {
           }}
         ></div>
 
+        <div className="relative z-10 mb-8 w-[200px]">
+          <ProwlerBrand className="w-full" />
+        </div>
+
         {/* Auth Form Container */}
         <div className="border-border-neutral-secondary dark:bg-bg-neutral-primary/85 relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-[14px] border bg-white/90 px-8 py-10 shadow-sm md:max-w-md">
           {/* 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 (
-    <div className="relative min-h-screen">
-      <div className="pointer-events-none absolute top-8 left-1/2 z-20 w-[200px] -translate-x-1/2">
-        <ProwlerBrand className="w-full" />
-      </div>
-      {children}
-    </div>
-  );
+  return <div className="relative min-h-screen">{children}</div>;
 };