[ESD-10361] Fix password strength popup overflow issue

DEVELOPMENT.md

@@ -40,3 +40,30 @@ yarn start
 Next, open `https://localhost:3000/support`, which will display a simple web app that allows you to interact with Auth0 to test functionality. The HTML template in `support/index.html` can be modified to test various different pieces of functionality.
 
 This is preconfigured with an Auth0 tenant and client ID but you may change this to your own for testing.
+
+## Testing Lock locally through the Universal Login Page
+
+If you need to test a local build of Lock, but hosted on the ULP, you can do this by modifying the ULP template for a tenant so that the script for Lock points to the locally-served instance at `https://localhost:3000/build/lock.js`.
+
+You can then use another SPA app to log in using this tenant that has this customized version of the Lock template.
+
+You may need to run Lock using HTTPS with a valid certificate if you want to do this testing in Safari, as Safari will not load mixed content pages, and will also not load HTTPS with untrusted testing certificates.
+
+Lock can already support HTTPS just by running `yarn start` if you have `mkcert` installed.
+
+To install `mkcert`:
+
+```
+brew install mkcert
+
+brew install nss # if you use Firefox
+
+mkcert install
+
+# Serve lock
+yarn start
+```
+
+Once Lock has started, use another SPA app to log in using a tenant with the template customized as above.
+
+If you don't have `mkcert`, HTTPS will still be used but it will be untrusted.

Gruntfile.js

@@ -105,6 +105,8 @@ module.exports = function(grunt) {
         hot: true,
         port: 3000,
         https: getDevCerts() || true,
+        // host: 'bs-local.com',
+        // disableHostCheck: true,
         webpack: {
           devtool: 'source-map'
         }

css/index.styl

@@ -83,8 +83,6 @@ loadingSize = 30px
   height 100%
   right 0
   z-index 1000000
-  +breakpoint("mobile")
-    display table
 
   a
     text-decoration none
@@ -107,10 +105,11 @@ loadingSize = 30px
     transition opacity .2s ease-in .4s
 
   .auth0-lock-center
+    box-sizing border-box
     +breakpoint("mobile")
-      vertical-align middle
-      display table-cell
-      margin auto
+      padding 40px
+      height 100%
+      display flex
 
   .auth0-lock-widget
     width 300px
@@ -119,7 +118,7 @@ loadingSize = 30px
     transform translateY(100%) scale(.8)
     -webkit-transition-timing-function cubic-bezier(.3, 0, 0, 1.4)
     transition-timing-function cubic-bezier(.3, 0, 0, 1.4)
-    margin 0 auto
+    margin auto
     border-radius 5px
 
     +breakpoint("mobile")
@@ -150,8 +149,8 @@ loadingSize = 30px
     flex-direction: column
     calculateHeight()
     max-height auto
+
     +breakpoint("mobile")
-      max-height: calc(100vh - 40px)
       min-height auto
       height auto
 
@@ -167,25 +166,24 @@ loadingSize = 30px
     overflow hidden
     -webkit-box-sizing border-box
     box-sizing border-box
-    display: flex
-    flex-direction: column
-    justify-content: center
-    flex-shrink: 0
-    flex-grow: 0
-    flex-basis: auto
-    position: absolute
-    width: 100%
-    z-index: 99
+    display flex
+    flex-direction column
+    justify-content center
+    flex-shrink 0
+    flex-grow 0
+    flex-basis auto
 
   .auth0-lock-content-wrapper
     flex-grow: 1
     flex-shrink: 1
     flex-basis: auto
     -webkit-overflow-scrolling touch
-    overflow-x: auto
+    overflow-x auto
+    +breakpoint("mobile")
+      overflow-x inherit
 
   .auth0-lock-content-body-wrapper
-    // padding-top 10px
+    padding-top 10px
 
   .auth0-lock-close-button, .auth0-lock-back-button
     -webkit-box-sizing content-box !important