From 09b7f2bb2422cb67b8ed9ca161e8572903a50d9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Wed, 4 Feb 2026 17:36:18 +0400
Subject: [PATCH] Handle spacing better for cases where there's a back link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../console/src/pages/iam/auth/AuthLayout.tsx |  7 ++++--
 .../src/pages/iam/auth/ForgotPasswordPage.tsx |  2 +-
 .../src/pages/iam/auth/ResetPasswordPage.tsx  |  2 +-
 .../src/pages/iam/auth/VerifyEmailPage.tsx    |  2 +-
 .../iam/auth/sign-in/PasswordSignInPage.tsx   |  2 +-
 .../pages/iam/auth/sign-in/SSOSignInPage.tsx  |  2 +-
 .../src/pages/iam/auth/sign-in/SignInPage.tsx | 21 +++++++---------
 .../auth/sign-up/SignUpFromInvitationPage.tsx |  2 +-
 .../src/pages/iam/auth/sign-up/SignUpPage.tsx |  2 +-
 apps/trust/src/pages/auth/AuthLayout.tsx      | 24 +++++++++++--------
 apps/trust/src/pages/auth/ConnectPage.tsx     |  2 +-
 .../src/pages/auth/VerifyMagicLinkPage.tsx    |  2 +-
 12 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/apps/console/src/pages/iam/auth/AuthLayout.tsx b/apps/console/src/pages/iam/auth/AuthLayout.tsx
index 0ebdd732b..84516d3f1 100644
--- a/apps/console/src/pages/iam/auth/AuthLayout.tsx
+++ b/apps/console/src/pages/iam/auth/AuthLayout.tsx
@@ -6,8 +6,11 @@ import { IAMRelayProvider } from "#/providers/IAMRelayProvider";
 export default function AuthLayout() {
   return (
     <div className="min-h-screen text-txt-primary bg-level-0 flex flex-col items-center justify-center">
-      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center gap-8">
-        <Logo withPicto className="w-[110px]" />
+      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center">
+        <div className="w-full flex flex-col items-center justify-center gap-8">
+          <Logo withPicto className="w-[110px]" />
+          <div className="w-full border-t border-t-border-mid" />
+        </div>
         <IAMRelayProvider>
           <Outlet />
         </IAMRelayProvider>
diff --git a/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx b/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
index 17b066083..f543d6524 100644
--- a/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
+++ b/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
@@ -77,7 +77,7 @@ export default function ForgotPasswordPage() {
 
   return instructionsSent
     ? (
-        <div className="space-y-6 w-full max-w-md mx-auto">
+        <div className="space-y-6 w-full max-w-md mx-auto pt-8">
           <div className="space-y-2 text-center">
             <h1 className="text-3xl font-bold">{__("Check your email")}</h1>
             <p className="text-txt-tertiary">
diff --git a/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx b/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
index aa4f2d47d..912f7e2b5 100644
--- a/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
+++ b/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
@@ -95,7 +95,7 @@ export default function ResetPasswordPage() {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Reset password")}</h1>
         <p className="text-txt-tertiary">
diff --git a/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx b/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
index e76f06487..d91758b93 100644
--- a/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
+++ b/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
@@ -76,7 +76,7 @@ export default function VerifyEmailPage() {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
         <p className="text-txt-tertiary">
diff --git a/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
index 8e23c1186..f17368ee0 100644
--- a/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
@@ -67,7 +67,7 @@ export default function PasswordSignInPage() {
   };
 
   return (
-    <form className="space-y-6 w-full max-w-md mx-auto" onSubmit={handlePasswordLogin}>
+    <form className="space-y-6 w-full max-w-md mx-auto pt-4" onSubmit={handlePasswordLogin}>
       <Link
         to="/auth/login"
         className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
diff --git a/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
index d9817746a..838d21f2e 100644
--- a/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
@@ -37,7 +37,7 @@ export default function SSOSignInPage() {
 
   return (
     <>
-      <form className="space-y-6 w-full max-w-md mx-auto" onSubmit={handleSSOCheck}>
+      <form className="space-y-6 w-full max-w-md mx-auto pt-4" onSubmit={handleSSOCheck}>
         <Link
           to="/auth/login"
           className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
diff --git a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
index 45aa60473..cbc9dbe8f 100644
--- a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
@@ -6,7 +6,7 @@ export default function SignInPage() {
   const { __ } = useTranslate();
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <h1 className="text-center text-2xl font-bold">
         {__("Login to your account")}
       </h1>
@@ -18,18 +18,13 @@ export default function SignInPage() {
         {__("Login with Email")}
       </Button>
 
-      <div className="relative my-6">
-        <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-border"></div>
-        </div>
-        <div className="relative flex justify-center">
-          <span
-            className="px-4 text-xs uppercase text-txt-secondary"
-            style={{ backgroundColor: "var(--color-level-0)" }}
-          >
-            {__("Or")}
-          </span>
-        </div>
+      <div className="relative my-6 w-full">
+        <div className="w-xs border-t border-border-mid mx-auto" />
+        <span
+          className="px-4 text-xs uppercase text-txt-secondary bg-level-0 absolute top-0 left-1/2 -translate-1/2"
+        >
+          {__("Or")}
+        </span>
       </div>
 
       <Button variant="secondary" className="w-xs h-10 mx-auto" to="/auth/sso-login">
diff --git a/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx b/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
index 1cbdbbf87..51e5cfb38 100644
--- a/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
@@ -95,7 +95,7 @@ export default function SignUpFromInvitationPage() {
   };
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Create your account")}</h1>
         <p className="text-txt-tertiary">
diff --git a/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx b/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
index 57e266622..9e4085c02 100644
--- a/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
@@ -81,7 +81,7 @@ export default function SignUpPage() {
   };
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Sign up")}</h1>
         <p className="text-txt-tertiary">
diff --git a/apps/trust/src/pages/auth/AuthLayout.tsx b/apps/trust/src/pages/auth/AuthLayout.tsx
index 0bcc18ae4..d8a9a75a7 100644
--- a/apps/trust/src/pages/auth/AuthLayout.tsx
+++ b/apps/trust/src/pages/auth/AuthLayout.tsx
@@ -27,16 +27,20 @@ export function AuthLayout(props: { queryRef: PreloadedQuery<AuthLayoutQuery> })
 
   return (
     <div className="min-h-screen text-txt-primary bg-level-0 flex flex-col items-center justify-center">
-      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center gap-8">
-        {logoFileUrl
-          ? (
-              <img
-                alt=""
-                src={logoFileUrl}
-                className="h-20 rounded-2xl"
-              />
-            )
-          : <Logo withPicto className="w-[440px]" />}
+      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center">
+        <div className="w-full flex flex-col items-center justify-center gap-8">
+          {logoFileUrl
+            ? (
+                <img
+                  alt=""
+                  src={logoFileUrl}
+                  className="h-20 rounded-2xl"
+                />
+              )
+            : <Logo withPicto className="w-[440px]" />}
+          <div className="w-full border-t border-t-border-mid" />
+        </div>
+
         <Outlet />
       </Card>
     </div>
diff --git a/apps/trust/src/pages/auth/ConnectPage.tsx b/apps/trust/src/pages/auth/ConnectPage.tsx
index bab616ff2..195481272 100644
--- a/apps/trust/src/pages/auth/ConnectPage.tsx
+++ b/apps/trust/src/pages/auth/ConnectPage.tsx
@@ -125,7 +125,7 @@ export function ConnectPage(props: {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">
           {__(`Connect to ${organization.name}'s Compliance Page`)}
diff --git a/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx b/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
index 38f022495..fa3e78a11 100644
--- a/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
+++ b/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
@@ -86,7 +86,7 @@ export default function VerifyMagicLinkPagePageMutation() {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
         <p className="text-txt-tertiary">