Simplified login with square logo needs logo to be smaller

[izmeez]

Description of the bug

When the new simplified login option available in 1.30.0 is chosen and the logo provided, either by the active theme or a custom logo, is a square logo the appearance on the simplified login page is too large and needs to be smaller.

This issue was noted in the dev meeting discussion related to issue, #6836

The graphic logo is also not responsive for different screen widths.

[izmeez]

Here are some screen captures for comparison.

Here is the default with Seven theme when use logo provided by theme:

And this is with path to a wide custom logo:

[izmeez]

Here is the simplified login without admin theme with square logo:

And there is simplified login, no admin theme, with custom wide logo:

[avpaderno]

I cannot replicate this issue, with an SVG logo: Its intrinsic size is 130x130 pixels; on the simplified login page, its rendered size is 130x130 pixels.

[olafgrabienski]

@avpaderno There is no issue with logos of a reasonable size, like yours, which is already quite small. The issue is with big logos, especially square ones, as their size doesn't get restricted (enough).

[olafgrabienski]

Thanks for opening the issue, @izmeez! We started the discussion already in the PR for #6570, but I missed to open a follow-up. See backdrop/backdrop#4957 (review) for details.

In that PR, the link surrounding the logo got a max-width of 240px. Which is fine for horizontal logos, but square logos look too big. My suggestion to cover both use cases: add a max-height of 160px to the <img> element (and leave the max-width for the .logo link).

.user-simplified-page-logo .logo img {
  max-height: 160px;
}

[izmeez]

@olafgrabienski Thanks for showing the earlier issue and PR that this is related to.

[izmeez]

@olafgrabienski Your suggestion appears to work. I have created a PR for testing and review. Thanks.

[olafgrabienski]

Thanks for the PR, @izmeez ! I've tested the PR in the sandbox, using Seven (with the nearly square big Backdrop logo) and Basis (with a couple of landscape and square logos). They all get scaled down in a nice way. Works for me!

[izmeez]

Here is the resulting display with the PR with max-height 160px and default BD logo with Seven theme.

[quicksketch]

Thank you @izmeez for taking this on! What an improvement. I merged backdrop/backdrop#5013 into 1.x and 1.30.x. Thank you @olafgrabienski and @avpaderno for reviewing!