From e32133d9a6fad8bbdfd47f4ab3d4423c7a02a858 Mon Sep 17 00:00:00 2001
From: Divyansh Goyal <goyaldivyansh1111@gmail.com>
Date: Wed, 1 Jul 2026 03:30:46 +0530
Subject: [PATCH] prevent social icons from overlapping in onboarding layout
 (#4692)

* prevent social icons from overlapping in onboarding layout

* fixed the alignment social icon forms

* revert

* fix: adjust spacing in social sign-in section of registration page

Updated the layout of the social sign-in options by adding a gap between the elements to improve visual clarity and user experience.

---------

Co-authored-by: Mauricio Siu <siumauricio@icloud.com>
---
 apps/dokploy/components/layouts/onboarding-layout.tsx | 6 +++---
 apps/dokploy/pages/register.tsx                       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/dokploy/components/layouts/onboarding-layout.tsx b/apps/dokploy/components/layouts/onboarding-layout.tsx
index c76c920fd..297a9d8a7 100644
--- a/apps/dokploy/components/layouts/onboarding-layout.tsx
+++ b/apps/dokploy/components/layouts/onboarding-layout.tsx
@@ -35,11 +35,11 @@ export const OnboardingLayout = ({ children }: Props) => {
 					</blockquote>
 				</div>
 			</div>
-			<div className="w-full">
-				<div className="flex w-full flex-col justify-center space-y-6 max-w-lg mx-auto">
+			<div className="flex min-h-svh w-full flex-col">
+				<div className="flex w-full flex-1 flex-col justify-center space-y-6 max-w-lg mx-auto py-8">
 					{children}
 				</div>
-				<div className="flex items-center gap-4 justify-center absolute bottom-4 right-4 text-muted-foreground">
+				<div className="mx-auto flex w-full max-w-lg items-center justify-center gap-1 pb-6 text-muted-foreground sm:justify-end">
 					<Button variant="ghost" size="icon">
 						<Link href="https://github.com/dokploy/dokploy">
 							<GithubIcon />
diff --git a/apps/dokploy/pages/register.tsx b/apps/dokploy/pages/register.tsx
index 9e3a18c65..f18747773 100644
--- a/apps/dokploy/pages/register.tsx
+++ b/apps/dokploy/pages/register.tsx
@@ -160,7 +160,7 @@ const Register = ({ isCloud }: Props) => {
 						)}
 						<CardContent className="p-0">
 							{isCloud && (
-								<div className="flex flex-col">
+								<div className="flex flex-col gap-2">
 									<SignInWithGithub />
 									<SignInWithGoogle />
 								</div>