Password strength checker hidden on small screens

The width of this is initially set in user.css

input.password-confirm,
input.password-field {
  width: 16em;
  margin-bottom: 0.4em;
}

It's overridden in seven/style.css, as this input element also has the .form-text class:

@media screen and (max-width: 600px) {
  #page {
    margin: 0 10px;
  }
  input.form-autocomplete,
  input.form-text,
  …
  …
  textarea.form-textarea,
  .form-select {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
  }

We could add another override here to reset the width to something else, but tbh it could end up quite small.
Another option is to force the password checker beneath the input. I'll have a go at a patch for that.

OK, here goes.
Made changes in user.js to append the markup for the password checker rather than prepend it (I don't know if I've missed any reason why it shouldn't be this way round?)
I've amended the CSS in user.css to remove the top-margin to line up the password checker on a desktop page-width.
I've amended the CSS in style.css to remove the floats when the small-width breakpoint kicks in and also to set the width of the parent wrappers to 100%.

I have tested the patch and it seems ok in Chrome, Safari, Firefox and Opera.

Reviewed the code and everything seems right. Maybe it should be considered as RTBC.

Looks great. Committed/pushed to 8.x.

Crazy. There were 2 issues for this, and #1887558: Password Strength indicator overlaps with input field in Narrow screens was committed 5 days before this one, this one created a month before, but still worked visually on top of the earlier commit. @mcjim, I like what you did switching the markup order in user.js. All I want to do here is cleanup the combination of the 2 patches.

From user.css, removing now unecessary css from my patch last week (zeroing out 2 top margins are no longer there). Then, the narrow viewport css you added to seven had been in part repeated in user.css, so I have moved and combined it there. We could put it all in seven/style.css if anyone would rather have it there. In user.css, it helps Bartik a bit, which is broken if left or all moved to seven.

#6: password-strength-checker-1864466-6.patch queued for re-testing.

I have reviewed the patch and it seems to solve the issue.

Tested in Chrome, Firefox, Safari and Opera. Also tested in iPhone and everything looks ok.

Maybe RTBC?

Great, thanks for the follow-up!

Committed and pushed to 8.x.