From 66445a99727b9c5adbf42265efc40d0790bc0ea5 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Fri, 17 Jul 2026 16:51:08 +0800
Subject: [PATCH] feat(auth-panel): enhance BackButton layout with Tailwind
 classes

---
 .../__tests__/tailwind-components.test.tsx         | 14 ++++++++++++++
 src/app/auth/components/auth-panel.tsx             |  7 ++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/app/auth/components/__tests__/tailwind-components.test.tsx b/src/app/auth/components/__tests__/tailwind-components.test.tsx
index fbbf3c36..014ef661 100644
--- a/src/app/auth/components/__tests__/tailwind-components.test.tsx
+++ b/src/app/auth/components/__tests__/tailwind-components.test.tsx
@@ -6,6 +6,7 @@ import { AuthEmailPanel } from "../auth-email-panel";
 import { AuthErrorMessage } from "../auth-error-message";
 import { AuthFacebookPanel } from "../auth-facebook-panel";
 import { AuthLegalText } from "../auth-legal-text";
+import { AuthPanel } from "../auth-panel";
 import { AuthPrimaryButton } from "../auth-primary-button";
 import { AuthSocialButton } from "../auth-social-button";
 import { AuthTextField } from "../auth-text-field";
@@ -23,6 +24,10 @@ vi.mock("@/stores/auth/auth-context", () => ({
   }),
 }));
 
+vi.mock("@/router/use-app-navigator", () => ({
+  useAppNavigator: () => ({ back: vi.fn() }),
+}));
+
 describe("auth Tailwind components", () => {
   it("renders AuthErrorMessage only when a message is present", () => {
     expect(renderToStaticMarkup(<AuthErrorMessage message={null} />)).toBe("");
@@ -76,6 +81,15 @@ describe("auth Tailwind components", () => {
     expect(html).toContain("%2Fimages%2Fauth%2Fbg-login.png");
   });
 
+  it("positions the back button from the auth screen top-left inset", () => {
+    const html = renderToStaticMarkup(<AuthPanel />);
+
+    expect(html).toContain('data-analytics-key="auth.back"');
+    expect(html).toContain("absolute left-0 top-0 z-2");
+    expect(html).toContain("size-(--responsive-icon-button-size,42px)");
+    expect(html).not.toContain("left-[calc(var(--spacing-xl,20px)");
+  });
+
   it("renders AuthSocialButton with Tailwind button layout", () => {
     const html = renderToStaticMarkup(
       <AuthSocialButton icon={<span>G</span>}>Continue</AuthSocialButton>,
diff --git a/src/app/auth/components/auth-panel.tsx b/src/app/auth/components/auth-panel.tsx
index a7957985..8bedf205 100644
--- a/src/app/auth/components/auth-panel.tsx
+++ b/src/app/auth/components/auth-panel.tsx
@@ -29,7 +29,12 @@ export function AuthPanel() {
 
   return (
     <div className="relative flex min-h-0 w-full flex-auto flex-col">
-      <BackButton onClick={handleBack} analyticsKey="auth.back" />
+      <BackButton
+        onClick={handleBack}
+        variant="soft"
+        className="absolute left-0 top-0 z-2"
+        analyticsKey="auth.back"
+      />
 
       {state.authPanelMode === "facebook" ? (
         <AuthFacebookPanel onSwitchToEmail={switchToEmail} />