From 1c680c11be9388ad262073fc85be74a20a940855 Mon Sep 17 00:00:00 2001
From: Jason Woltje <jason@diversecanvas.com>
Date: Sun, 22 Feb 2026 00:15:29 -0600
Subject: [PATCH] style(ui): refine login card shape and divider spacing

- Remove top border-radius from AuthCard (flat top edge, rounded bottom)
- Add overflow-hidden so rainbow gradient bar stays within card bounds
- Remove rounded-t-2xl from gradient bar (no longer needed)
- Increase AuthDivider vertical margin from my-5 to my-8
- Update test selector to match new rounded-b-2xl class

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/(auth)/login/page.test.tsx | 4 ++--
 packages/ui/src/components/AuthSurface.tsx  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/(auth)/login/page.test.tsx b/apps/web/src/app/(auth)/login/page.test.tsx
index 5811ce4..f727cbe 100644
--- a/apps/web/src/app/(auth)/login/page.test.tsx
+++ b/apps/web/src/app/(auth)/login/page.test.tsx
@@ -491,8 +491,8 @@ describe("LoginPage", (): void => {
         expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
       });
 
-      // AuthCard uses rounded-2xl and p-6 sm:p-10
-      const card = container.querySelector(".rounded-2xl");
+      // AuthCard uses rounded-b-2xl and p-6 sm:p-10
+      const card = container.querySelector(".rounded-b-2xl");
       expect(card).toHaveClass("p-6", "sm:p-10");
     });
 
diff --git a/packages/ui/src/components/AuthSurface.tsx b/packages/ui/src/components/AuthSurface.tsx
index 6c016fb..7c2f97c 100644
--- a/packages/ui/src/components/AuthSurface.tsx
+++ b/packages/ui/src/components/AuthSurface.tsx
@@ -58,14 +58,14 @@ export function AuthCard({ children, className, ...props }: AuthCardProps): Reac
   return (
     <div
       className={joinClassNames(
-        "relative w-full rounded-2xl border border-[#b8c4de] bg-[#dde4f2]/90 p-6 shadow-[0_30px_70px_rgba(15,20,29,0.24)] backdrop-blur-sm sm:p-10 dark:border-[#2f3b52] dark:bg-[#1b2331]/[0.92] dark:shadow-[0_32px_80px_rgba(0,0,0,0.52)]",
+        "relative w-full overflow-hidden rounded-b-2xl border border-[#b8c4de] bg-[#dde4f2]/90 p-6 shadow-[0_30px_70px_rgba(15,20,29,0.24)] backdrop-blur-sm sm:p-10 dark:border-[#2f3b52] dark:bg-[#1b2331]/[0.92] dark:shadow-[0_32px_80px_rgba(0,0,0,0.52)]",
         className
       )}
       {...props}
     >
       <div
         aria-hidden="true"
-        className="pointer-events-none absolute inset-x-0 top-0 h-0.5 rounded-t-2xl bg-[linear-gradient(90deg,#2f80ff,#8b5cf6,#14b8a6,#f59e0b)]"
+        className="pointer-events-none absolute inset-x-0 top-0 h-0.5 bg-[linear-gradient(90deg,#2f80ff,#8b5cf6,#14b8a6,#f59e0b)]"
       />
       {children}
     </div>
@@ -153,7 +153,7 @@ export function AuthDivider({
   return (
     <div
       className={joinClassNames(
-        "my-5 flex items-center gap-3 text-[0.67rem] font-semibold uppercase tracking-[0.08em] text-[#5a6a87] dark:text-[#8f9db7]",
+        "my-8 flex items-center gap-3 text-[0.67rem] font-semibold uppercase tracking-[0.08em] text-[#5a6a87] dark:text-[#8f9db7]",
         className
       )}
     >
-- 
2.49.1