fix(*): Apply vertical margin to screen children via styles (.fui-screen__children)

Author: Ehesp

packages/react/src/auth/screens/email-link-auth-screen.tsx

@@ -41,7 +41,7 @@ export function EmailLinkAuthScreen({ children, onEmailSent }: EmailLinkAuthScre
           {children ? (
             <>
               <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
-              <div className="space-y-4">{children}</div>
+              <div className="fui-screen__children">{children}</div>
             </>
           ) : null}
         </CardContent>

packages/react/src/auth/screens/oauth-screen.tsx

@@ -35,7 +35,7 @@ export function OAuthScreen({ children }: OAuthScreenProps) {
           <CardTitle>{titleText}</CardTitle>
           <CardSubtitle>{subtitleText}</CardSubtitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="fui-screen__children">
           {children}
           <Policies />
         </CardContent>

packages/react/src/auth/screens/phone-auth-screen.tsx

@@ -41,7 +41,7 @@ export function PhoneAuthScreen({ children, ...props }: PhoneAuthScreenProps) {
           {children ? (
             <>
               <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
-              <div className="space-y-4">{children}</div>
+              <div className="fui-screen__children">{children}</div>
             </>
           ) : null}
         </CardContent>

packages/react/src/auth/screens/sign-in-auth-screen.tsx

@@ -41,7 +41,7 @@ export function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps)
           {children ? (
             <>
               <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
-              <div className="space-y-4">{children}</div>
+              <div className="fui-screen__children">{children}</div>
             </>
           ) : null}
         </CardContent>

packages/react/src/auth/screens/sign-up-auth-screen.tsx

@@ -41,7 +41,7 @@ export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps)
           {children ? (
             <>
               <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
-              <div className="space-y-4">{children}</div>
+              <div className="fui-screen__children">{children}</div>
             </>
           ) : null}
         </CardContent>

packages/styles/src/base.css

@@ -79,6 +79,10 @@
     @apply pt-24 max-w-md mx-auto;
   }
 
+  :where(.fui-screen .fui-screen__children) {
+    @apply space-y-2;
+  }
+
   :where(.fui-card) {
     @apply bg-background p-10 border border-border rounded-card space-y-6;
   }
@@ -145,15 +149,15 @@
   }
 
   :where(.fui-divider) {
-    @apply flex items-center gap-3;
+    @apply flex items-center gap-3 my-4;
   }
 
   :where(.fui-divider__line) {
     @apply flex-1 h-px bg-border;
   }
 
   :where(.fui-divider__text) {
-    @apply text-text-muted text-xs my-2;
+    @apply text-text-muted text-xs;
   }
 
   :where(.fui-phone-input) {