Administration email verification box is too wide on large size desktop.

[chetan200891]

In 5.3, new feature implemented called "Administration email verification" but it's box is showing too wide on large desktop. I have attached screenshot.

[chetan200891]

Created patch 48607.diff provide max-width to box.

[chetan200891]

After applying patch. - Desktop

[chetan200891]

After applying patch. - Mobile

[azaozz]

Hi @chetan200891, thanks for the patch. Yes, a "sensible" max-width would be good there. However thinking it shouldn't be "locked" to a specific pixel width, perhaps?

Also thinking it looks pretty well on mobile at the moment (https://core.trac.wordpress.org/attachment/ticket/48607/Email-Verification-Mobile-Before.png), adding more padding on the sides doesn't make it more readable, etc. Perhaps @andraganescu may want to have a look :)

[Clorith]

I agree that it would make sense to give it a max width here, I think that giving it a max pixel width is probably the correct way to go here though, as it's not a lot of information and text, and monitors are getting quite wide, which would lead to a lot of whitespace inside the container in many cases.

It should be a reasonable max though, I think Email-Verification-Desktop-Before.png​ is slightly too wide, removing maybe 10-15% of the width there I think is the sweet spot for most languages ( Email-Verification-Desktop-After.png​ is a little bit too narrow for my taste ).

[chetan200891]

Updated patch.

[azaozz]

Replying to Clorith:

I agree that it would make sense to give it a max width here, I think that giving it a max pixel width is probably the correct way to go

Yeah, you're right. Looking again, the first patch (fixed max-width) seems better. The only thing that might needs changing is the padding on mobile, thinking having a smaller padding may be better?

[azaozz]

With 48607.2.diff.

[azaozz]

48607.2.diff

[afragen]

Screenshots look good.

[SergeyBiryukov]

In 47772:

Site Health: Improve the appearance of administration email verification box.

Add max-width on desktop view and some padding on smaller screens.

Props chetan200891, azaozz, Clorith, afragen.
Fixes #48607.