From e7af364720c7856b2d4bc8d5efdb00b5916d927f Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Tue, 12 Dec 2023 09:08:30 -0500
Subject: [PATCH] [Login] Fix button layout (#2831)

---
 src/components/Login/Login.tsx | 56 +++++++++++++++++++---------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index 7de3530dc4..f498f08f84 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -159,35 +159,43 @@ export default function Login(): ReactElement {
             />
 
             {/* User Guide, Sign Up, and Log In buttons */}
-            <Grid container justifyContent="flex-end" spacing={2}>
-              <Grid item xs={4} sm={6}>
+            <Grid container justifyContent="space-between">
+              <Grid item xs={1}>
                 <Button id={LoginId.ButtonUserGuide} onClick={openUserGuide}>
                   <Help />
                 </Button>
               </Grid>
 
-              <Grid item xs={4} sm={3}>
-                <Button
-                  id={LoginId.ButtonSignUp}
-                  onClick={() => router.navigate(Path.Signup)}
-                  variant="outlined"
-                >
-                  {t("login.signUp")}
-                </Button>
-              </Grid>
-
-              <Grid item xs={4} sm={3}>
-                <LoadingButton
-                  buttonProps={{
-                    color: "primary",
-                    id: LoginId.ButtonLogIn,
-                    type: "submit",
-                  }}
-                  disabled={!isVerified}
-                  loading={status === LoginStatus.InProgress}
-                >
-                  {t("login.login")}
-                </LoadingButton>
+              <Grid
+                container
+                item
+                justifyContent="flex-end"
+                spacing={2}
+                xs="auto"
+              >
+                <Grid item>
+                  <Button
+                    id={LoginId.ButtonSignUp}
+                    onClick={() => router.navigate(Path.Signup)}
+                    variant="outlined"
+                  >
+                    {t("login.signUp")}
+                  </Button>
+                </Grid>
+
+                <Grid item>
+                  <LoadingButton
+                    buttonProps={{
+                      color: "primary",
+                      id: LoginId.ButtonLogIn,
+                      type: "submit",
+                    }}
+                    disabled={!isVerified}
+                    loading={status === LoginStatus.InProgress}
+                  >
+                    {t("login.login")}
+                  </LoadingButton>
+                </Grid>
               </Grid>
             </Grid>