From e44025b68759f7313ffe0445b27016b658fa2ecf Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 11 Jun 2024 09:53:58 -0400
Subject: [PATCH] UX: improve login modal on very narrow screens in desktop
 mode (#27405)

---
 .../stylesheets/common/modal/login-modal.scss | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/modal/login-modal.scss b/app/assets/stylesheets/common/modal/login-modal.scss
index 2e4cc9ec31e..00de9e731b6 100644
--- a/app/assets/stylesheets/common/modal/login-modal.scss
+++ b/app/assets/stylesheets/common/modal/login-modal.scss
@@ -42,6 +42,7 @@
   }
 
   .login-left-side {
+    box-sizing: border-box;
     width: 100%;
     padding: 3rem;
     overflow: auto;
@@ -51,12 +52,12 @@
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
-    overflow-wrap: anywhere;
   }
 
   .login-title {
     font-size: var(--font-up-6);
     margin: 0;
+    line-height: var(--line-height-medium);
   }
 
   .waving-hand {
@@ -122,6 +123,36 @@
       display: inline;
     }
   }
+
+  .desktop-view & {
+    @media screen and (max-width: 767px) {
+      // important to maintain narrow desktop widths
+      // for auth modals in Discourse Hub on iPad
+      .d-modal__header {
+        right: 0;
+        top: 0;
+      }
+      .has-alt-auth {
+        flex-direction: column;
+        overflow: auto;
+        gap: 1em;
+        .login-welcome-header,
+        .d-modal__footer {
+          font-size: var(--font-down-1);
+        }
+        .login-left-side {
+          overflow: unset;
+          padding: 1em 2.75em 1em 1em;
+        }
+        .login-right-side {
+          padding: 1em;
+        }
+        #login-form {
+          margin: 1.5em 0;
+        }
+      }
+    }
+  }
 }
 /* end shared styles */