From 57af43b142d15a0b401d48b25f69e5d79252a942 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 8 Nov 2018 15:25:10 -0500
Subject: [PATCH] UX: Make long sign-up forms scrollable in modal

---
 app/assets/stylesheets/common/base/login.scss | 10 ++--
 app/assets/stylesheets/common/base/modal.scss |  1 -
 app/assets/stylesheets/desktop/login.scss     | 48 +++++++++++++++++--
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index ec1ab6891e7..72bd4357f6e 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -76,12 +76,6 @@ $input-width: 220px;
     margin-top: 0.5em;
   }
 
-  .user-fields {
-    margin-top: 0.75em;
-    padding-top: 0.25em;
-    border-top: 1px solid $primary-low;
-  }
-
   .user-field {
     > label {
       width: $label-width;
@@ -90,6 +84,10 @@ $input-width: 220px;
       margin-bottom: 0;
       padding-top: 5px;
     }
+    &:first-of-type > label {
+      margin-top: 0;
+    }
+
     input[type="text"] {
       margin-bottom: 0;
       width: 100%;
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 1831f6f054c..4b2a6d0b8e9 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -193,7 +193,6 @@
   .modal-body {
     box-sizing: border-box;
     width: 100%;
-    overflow-y: auto;
     max-height: 400px;
     &.full-height-modal {
       max-height: calc(100vh - 150px);
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 75a94f58f59..72873d5f12f 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -26,10 +26,10 @@
     #login-buttons:not(.hidden) {
       button {
         &:first-of-type {
-          margin-top: 3.2em;
+          margin-top: 2.8em;
         }
         &:last-of-type {
-          margin-bottom: 3.2em;
+          margin-bottom: 3em;
         }
       }
     }
@@ -38,7 +38,7 @@
   .create-account {
     #login-buttons:not(.hidden) {
       justify-content: flex-start;
-      padding-top: 1.5em;
+      padding-top: 2.7em;
     }
   }
 
@@ -94,10 +94,48 @@
   }
 
   .login-form {
+    position: relative;
     display: flex;
     flex: 1 1 50%;
-    align-items: center;
-    padding: 0 15px;
+    overflow: hidden;
+
+    &:after,
+    &:before {
+      content: "";
+      display: block;
+      height: 25px;
+      position: absolute;
+      width: 100%;
+      pointer-events: none;
+    }
+    &:after {
+      bottom: 0;
+      background-image: linear-gradient(
+        to bottom,
+        rgba($secondary, 0) 0%,
+        rgba($secondary, 1) 100%
+      );
+    }
+    &:before {
+      top: 0;
+      background-image: linear-gradient(
+        to top,
+        rgba($secondary, 0) 0%,
+        rgba($secondary, 1) 100%
+      );
+    }
+    form {
+      box-sizing: border-box;
+      padding: 15px;
+      margin-bottom: 5px;
+      max-height: 450px;
+      @media screen and (max-height: 768px) {
+        max-height: 60vh;
+      }
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
     form,
     table {
       width: 100%;