Issue #1864466 by mcjim: Fixed Password strength checker hidden on small screens.

core/modules/user/user.css

@@ -19,7 +19,6 @@
 .password-strength {
   width: 17em;
   float: right;  /* LTR */
-  margin-top: 1.4em;
 }
 .password-strength-title {
   display: inline;
@@ -45,7 +44,6 @@ input.password-field {
 }
 div.password-confirm {
   float: right;  /* LTR */
-  margin-top: 1.5em;
   visibility: hidden;
   width: 17em;
 }

core/modules/user/user.js

@@ -18,7 +18,7 @@ Drupal.behaviors.password = {
       innerWrapper.addClass('password-parent');
 
       // Add the password confirmation layer.
-      outerWrapper.find('input.password-confirm').parent().prepend('<div class="password-confirm">' + translate.confirmTitle + ' <span></span></div>').addClass('confirm-parent');
+      outerWrapper.find('input.password-confirm').parent().append('<div class="password-confirm">' + translate.confirmTitle + ' <span></span></div>').addClass('confirm-parent');
       var confirmInput = outerWrapper.find('input.password-confirm');
       var confirmResult = outerWrapper.find('div.password-confirm');
       var confirmChild = confirmResult.find('span');
@@ -26,7 +26,7 @@ Drupal.behaviors.password = {
       // Add the description box.
       var passwordMeter = '<div class="password-strength"><div class="password-strength-text" aria-live="assertive"></div><div class="password-strength-title">' + translate.strengthTitle + '</div><div class="password-indicator"><div class="indicator"></div></div></div>';
       confirmInput.parent().after('<div class="password-suggestions description"></div>');
-      innerWrapper.prepend(passwordMeter);
+      innerWrapper.append(passwordMeter);
       var passwordDescription = outerWrapper.find('div.password-suggestions').hide();
 
       // Check the password strength.

core/themes/seven/style.css

@@ -816,6 +816,14 @@ select.form-select:focus {
     float: none;
     padding: 0;
   }
+  div.password-confirm,
+  .password-strength {
+    float: none;
+  }
+  .confirm-parent,
+  .password-parent {
+    width: 100%;
+  }
 }
 
 /* Exceptions */