[Login] Fix button layout (#2831)

sillsdev · Dec 12, 2023 · e7af364 · e7af364
1 parent 316b37a
commit e7af364
Showing 1 changed file with 32 additions and 24 deletions.
diff --git 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>