From 19677ce3f62ce0f6619040bfbf5fc87e2b0ac3ee Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 11 May 2022 00:36:27 -0400
Subject: [PATCH] UX: fix various login modal issues on mobile (#16708)

---
 app/assets/stylesheets/mobile/login.scss | 14 +++++++++++---
 config/locales/client.en.yml             | 16 ++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index 0ea664e63f5..24f701cf325 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -35,14 +35,15 @@
     flex: 1 0 auto;
     flex-wrap: wrap;
     justify-content: center;
-    padding: 1em;
+    padding: 0 1em;
     margin: 0;
+    gap: 0 0.25em;
 
     .btn {
-      padding: 0.53em 0.53em 0.53em 0.43em;
+      padding: 0.5em;
       border: 1px solid var(--primary-low);
       flex: 1 1 47%;
-      margin: 0 0.5em 0.5em 0;
+      font-size: var(--font-down-1);
       white-space: nowrap;
       &:last-child {
         margin-right: 0;
@@ -144,6 +145,13 @@
 
 // Styles for the
 // login modal only
+
+#discourse-modal {
+  &.d-modal.login-modal:not(.hidden) .modal-body {
+    max-height: 68vh !important; // overrides another important
+  }
+}
+
 .d-modal.login-modal {
   #credentials {
     width: 100%;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index d9086c82d65..2a083c20524 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1999,20 +1999,20 @@ en:
         sr_title: "Sign in with Twitter"
       instagram:
         name: "Instagram"
-        title: "Login with Instagram"
-        sr_title: "Login with Instagram"
+        title: "Log in with Instagram"
+        sr_title: "Log in with Instagram"
       facebook:
         name: "Facebook"
-        title: "Login with Facebook"
-        sr_title: "Login with Facebook"
+        title: "Log in with Facebook"
+        sr_title: "Log in with Facebook"
       github:
         name: "GitHub"
-        title: "Login with GitHub"
-        sr_title: "Login with GitHub"
+        title: "Log in with GitHub"
+        sr_title: "Log in with GitHub"
       discord:
         name: "Discord"
-        title: "Login with Discord"
-        sr_title: "Login with Discord"
+        title: "Log in with Discord"
+        sr_title: "Log in with Discord"
       second_factor_toggle:
         totp: "Use an authenticator app instead"
         backup_code: "Use a backup code instead"