Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#48607 closed defect (bug) (fixed)

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

Reported by: chetan200891's profile chetan200891 Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.3
Component: Site Health Keywords: has-screenshots 2nd-opinion has-patch
Focuses: ui, administration Cc:

Description

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.

Attachments (9)

Email-Verification-Desktop-Before.png (46.2 KB) - added by chetan200891 5 years ago.
Email-Verification-Mobile-Before.png (40.4 KB) - added by chetan200891 5 years ago.
48607.diff (499 bytes) - added by chetan200891 5 years ago.
Email-Verification-Desktop-After.png (46.2 KB) - added by chetan200891 5 years ago.
After applying patch. - Desktop
Email-Verification-Mobile-After.png (39.1 KB) - added by chetan200891 5 years ago.
After applying patch. - Mobile
48607.1.diff (299 bytes) - added by chetan200891 5 years ago.
Updated patch.
48607.2.diff (523 bytes) - added by azaozz 5 years ago.
phone.png (49.2 KB) - added by azaozz 5 years ago.
With 48607.2.diff.
iPad.png (62.1 KB) - added by azaozz 5 years ago.
48607.2.diff

Download all attachments as: .zip

Change History (24)

@chetan200891
5 years ago

#1 @chetan200891
5 years ago

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

@chetan200891
5 years ago

After applying patch. - Desktop

@chetan200891
5 years ago

After applying patch. - Mobile

#2 @chetan200891
5 years ago

  • Keywords has-patch added

#3 @azaozz
5 years ago

  • Keywords 2nd-opinion added; has-patch removed

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 :)

#4 @SergeyBiryukov
5 years ago

  • Component changed from General to Site Health

#5 follow-up: @Clorith
5 years ago

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
5 years ago

Updated patch.

This ticket was mentioned in Slack in #core by chetan200891. View the logs.


5 years ago

#7 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 5.5
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #core-site-health by afragen. View the logs.


5 years ago

#9 @afragen
5 years ago

  • Keywords has-patch added
  • Owner changed from SergeyBiryukov to afragen

#10 @afragen
5 years ago

  • Owner changed from afragen to SergeyBiryukov

This ticket was mentioned in Slack in #core-site-health by afragen. View the logs.


5 years ago

#12 in reply to: ↑ 5 @azaozz
5 years ago

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
5 years ago

@azaozz
5 years ago

With 48607.2.diff.

@azaozz
5 years ago

48607.2.diff

This ticket was mentioned in Slack in #core-site-health by afragen. View the logs.


5 years ago

#14 @afragen
5 years ago

Screenshots look good.

#15 @SergeyBiryukov
5 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.