From b9864fe1f6449ab843a3743c519176823d178617 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Fri, 24 Oct 2025 17:22:44 -0700
Subject: [PATCH] fix: Use gap-4 instead of margins to define space between
 elements (#12728)

We should avoid using margins to define space between elements, instead
use the gap utility.

The problem with this particular instance was that if Google auth was
turned off and SSO is available, there is a weird spacing at the top
caused by the margin from the SSO element.

This PR will fix that. It also introduces a gap between the divider and
the button, but that should be okay.
---
 app/javascript/v3/views/login/Index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index 04fb939c8..11a61d3dd 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -259,9 +259,9 @@ export default {
       }"
     >
       <div v-if="!email">
-        <div class="flex flex-col">
+        <div class="flex flex-col gap-4">
           <GoogleOAuthButton v-if="showGoogleOAuth" />
-          <div v-if="showSamlLogin" class="mt-4 text-center">
+          <div v-if="showSamlLogin" class="text-center">
             <router-link
               to="/app/login/sso"
               class="inline-flex justify-center w-full px-4 py-3 items-center bg-n-background dark:bg-n-solid-3 rounded-md shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"