UX: adjust invite and related form spacing (#15556)

UX: adjust invite and related form spacing (#15556)

diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index bb84c7a..e182856 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -70,6 +70,8 @@
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
     background: var(--secondary);
+    max-width: 33em;
+    word-break: break-word;
     .login-title {
       margin-bottom: 0;
     }
@@ -136,6 +138,7 @@
         min-width: 250px;
         box-shadow: none;
         margin-bottom: 0.25em;
+        width: 100%;
       }
       input:focus {
         outline: none;
@@ -309,8 +312,8 @@
   }
 
   .invite-form {
-    padding-left: 20px;
     margin-bottom: 50px;
+    max-width: 33em;
     .tip {
       display: block;
     }
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 9d2c688..93c6946 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -394,8 +394,8 @@
 .email-login,
 .invites-show {
   .col-form {
-    padding-left: 20px;
-    width: 470px;
+    padding: 0.5em 2em 1em;
+    max-width: 30em;
   }
   .col-image {
     width: 175px;
@@ -403,6 +403,9 @@
       width: 100%;
     }
   }
+  details {
+    width: 100%;
+  }
   h2 {
     margin-bottom: 12px;
   }
@@ -412,7 +415,7 @@
   }
   .invite-form,
   .invite-success {
-    box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25);
+    box-shadow: shadow("card");
   }
 }
 

GitHub sha: 320c4c12f46714b123bced24edb345376a339031

This commit appears in #15556 which was approved by SamSaffron. It was merged by SamSaffron.