Login page: Password field less wide than User field

[olafgrabienski]

Description of the bug

After upgrading various sites to Backdrop 1.17.x, I noticed that the password field on some of the sites with a Basis sub-theme is not as wide as before.

Steps To Reproduce

To reproduce the behavior:

1. Set the input elements (Username and Password) to a width of 100% (in your sub-theme or via browser dev tools).
2. Make sure your browser window is more than 992px wide.
3. Go to user/login.

Actual behavior

The password field is not as wide as the Username field.

Expected behavior

The password field width should match the User field width, as before. Alternatively, inform people with sub-themes how to get the desired behavior.

Screenshots

Before update:

After update to 1.17.1:

Additional information

I suspect .password-toggle-wrapper { display: inline-block; } from https://github.com/backdrop/backdrop/pull/2129/files#diff-dda5165ae83ca49b90750e9c569f5516R43 being the issue which is quite old but probably came in for the Login page only recently via #3048.

[klonos]

This is in Basis, right @olafgrabienski ?

[olafgrabienski]

More or less. It happens to me in a Basis sub-theme where I have set the password input element to a custom width of 100%, and now it isn't 100% wide anymore. In a vanilla Backdrop installation with just Basis as theme it's fine.

[indigoxela]

I wasn't able to reproduce this on any of my sites (Basis subtheme or not).

@olafgrabienski are you sure that it's a core bug? Otherwise you could close this issue.

[olafgrabienski]

are you sure that it's a core bug?

Hm, I guess, but certainly not 100%. Have to check it again, will report back.

[olafgrabienski]

@indigoxela I was able to reproduce the issue on a vanilla Backdrop installation (well, actually on a PR sandbox for issue 4808 which shouldn't have side effects re the issue here).

I've mave made a screenshot and highlighted the important parts there, want to try again?

[klonos]

Hmm 🤔 ...I cannot reproduce this on Mac/Chrome: https://pr3448-nb9q6be5myqxi6ij9rc55gbzhvzniov4.tugboat.qa/user/login ...I've tried resizing the browser window, and the width of the two fields persisted to be the same at all times 🤷

What browser/OS are you seeing this in @olafgrabienski ?

[olafgrabienski]

What browser/OS are you seeing this in?

Same as you: Mac + Chrome ;-) Have you set the inputs (name and password) to a width of 100% in the browser dev tools?

[klonos]

Have you set the inputs (name and password) to a width of 100% in the browser dev tools?

Why would I do that? ...the moment you change things, you are not testing a "vanilla" installation, so that right there might be the issue.

Are you trying to manually set the width to 100%? ...and if so, then why?

[olafgrabienski]

Are you trying to manually set the width to 100%? ...and if so, then why?

Yes, I do. It's a design decision which I used on a couple of sites with a Basis sub-theme: Both login inputs cover the whole width of the page, see the "before" screenshot in the issue description. As mentioned there, when both fields where set to 100% width, the password field width used to match the user name field width for a long time.

It might not be a classical bug, probably an edge-case. After upgrading to Backdrop 1.17.x, I found however several of my sites "broken" with strange looking login forms. That's why I suggested: "Alternatively, inform people with sub-themes how to get the desired behavior." That said, actually I don't think that the "breakage", even for sub-themes, is an intended behavior. So, we could also try to fix it. Before, I'd be happy if someone could confirm the issue. Can you try the STR again?

[klonos]

Yes, I do. It's a design decision which I used on a couple of sites with a Basis sub-theme ...

Sorry, I missed that. I was under the impression that this was happening in a vanilla installation.