Password strength indicator for site maintenance account is aligned incorrectly on the installation screen

That alignment is indeed faulty, it's easy to reproduce. The provided patch makes it look nice.

The patch only works on narrow screens tried on latest d8-x.dev. Also see related #2044889: 'Password Match' alignment error during install.

#1811240: Improve "password matches" and "password strength" accessibility also overlaps this.

Patch #1839318: Replace drupal.base.css library with normalize.css for all themes went in 9/28 and overlaps this one. This needs a reroll.

Patch #1839318: Replace drupal.base.css library with normalize.css for all themes went in on 9/28 and overlaps this one. Needs a reroll?

The patch applied fine but needed more work. There were bugs with how the fields were sitting next to the inputs when you went from small screen to big and also the fields dropping below too soon before they became 100% width. These issues have all been sorted and this patch is ready to test.

Installed patch on current clone. Install page now looks OK but user' 'Create' page now bollixed. Was OK before this patch.
On entry:

After entering a password:

After entering confirmation password:

After #1839318: Replace drupal.base.css library with normalize.css for all themes, this is all that should be needed to fix alignment errors in the password form.

#9 does not fix the alignment problem. They should sit alongside the input fields when there is room.

All #7 needs is an overflow hidden on the form items on the user creation form to stop them collapsing.

I have added the extra fix to #7 and tested the installer and the user pages. Everything looks spiffing :)

Emma

Tested and patch applies well. Code seems fine and here are some screenshots for each mediaquery that show that it's a RTBC ;)

#12: password-alignment-installer-2100509-12.patch queued for re-testing.

Ok, I think the bot was wrong, in which case this is back to RTBC.

#12: password-alignment-installer-2100509-12.patch queued for re-testing.

+++ b/core/modules/user/css/user.module.css
@@ -51,11 +51,12 @@ input.password-confirm,
+  float:left;

I would have thought that this might mess up rtl - since we have the following css in user.module.css

[dir="rtl"] .password-strength-text {
  float: left;
}

alexpott is correct, see password-indicator-before.png

I have updated the LTR/RTL version and fixed some css coding standards, see password-indicator-after.png

Can anybody help me to find out how to change whole D8 site from RTL ? I want to review the issue queue but doesn't able to change site from right to left.

I have test the patch 2100509-19 manually. Please find the screenshots of before and after applying patch.

I think you can just install it so that the primary language is Arabic or Hebrew and you should be able to see it in RTL.

EDIT: Or simpler, just add an Arabic/Hebrew language to your existing test environment & switch to it via the URL.

Changed to RTBC

confirmed patch works as required

Awesome! This has been bugging the crap out of me in demos! :)

Confirmed in RTL as well. Don't ask me what this says, but it looks aligned. :)

Committed and pushed to 8.x, with a minor whitespace fix. Thanks!

Although, come to think of it, does that CSS really better belong in a user.theme.css so that it's easy for themes to override the styling? (separate issue)