Context Navigation

← Previous Ticket
Next Ticket →

#50177 closed defect (bug) (fixed)

Writing Settings : Mail Server Port field overlap on small screens

Reported by:	pravinparmar2404	Owned by:	audrasjb
Priority:	normal	Milestone:	6.0
Component:	Administration	Version:	5.3
Severity:	normal	Keywords:	good-first-bug has-patch commit
Cc:		Focuses:	ui, css

Description

Attachments (10)

writing-settings-overlap-small-screens.png (34.4 KB ) - added by pravinparmar2404 6 years ago.: Mail Server Port field overlap on small screens
50177.png (117.5 KB ) - added by afercia 6 years ago.
forms.diff (31.0 KB ) - added by utz119 6 years ago.
screenshot-mailserver.png (266.9 KB ) - added by utz119 6 years ago.: For the version 5.3. Margin 3px is added on the top.
50177.diff (767 bytes ) - added by utz119 6 years ago.
50177.1.diff (332 bytes ) - added by utz119 6 years ago.
50177-suggestion.png (71.1 KB ) - added by thimalw 6 years ago.: Mockup suggestion
post-via-email-port.jpg (42.2 KB ) - added by sabernhardt 6 years ago.: keeping the Port input's size small, plus the previous suggestion of moving the input below its label
e5c5c516c14ad910434c11932dcfcf57.gif (4.4 MB ) - added by audrasjb 4 years ago.: After applying the above PR
50177.2.diff (612 bytes ) - added by pyrobd 4 years ago.: After applying the suggested CSS

Change History (30)

@pravinparmar2404
6 years ago

Attachment writing-settings-overlap-small-screens.png added

Mail Server Port field overlap on small screens

#1 @pravinparmar2404
6 years ago

#50176 was marked as a duplicate.

@afercia
6 years ago

Attachment 50177.png added

#2 @afercia
6 years ago

Component Options, Meta APIs → Administration
Focuses administration removed
Version 5.4.1 → 5.3

Above: screenshot from WordPress 4.7 for comparison.

While the root cause of this issue always existed, as in: lack of a proper layout in the responsive view, the new styling for the input fields introduced in WordPress 5.3 made this glitch more evident.

@utz119
6 years ago

Attachment forms.diff added

@utz119
6 years ago

Attachment screenshot-mailserver.png added

For the version 5.3. Margin 3px is added on the top.

@utz119
6 years ago

Attachment 50177.diff added

@utz119
6 years ago

Attachment 50177.1.diff added

#3 @utz119
6 years ago

Sorry for uploading so many times. Please disregard the previous files. Please use this instead!

#4 @utz119
6 years ago

Keywords has-patch added

@thimalw
6 years ago

Attachment 50177-suggestion.png added

Mockup suggestion

@sabernhardt
6 years ago

Attachment post-via-email-port.jpg added

keeping the Port input's size small, plus the previous suggestion of moving the input below its label

#5 @sabernhardt
6 years ago

I like @thimalw's idea of moving the input below its label, though I think the input could stay the same size. (The side margin would still need to be set to zero.)

#6 @sabernhardt
4 years ago

#54942 was marked as a duplicate.

#7 @sabernhardt
4 years ago

Milestone Awaiting Review → 6.0

#8 @audrasjb
4 years ago

Keywords needs-refresh added

Refreshing the patch right now.

This ticket was mentioned in PR #2241 on WordPress/wordpress-develop by audrasjb.

4 years ago #9

Keywords needs-refresh removed

Trac ticket: https://core.trac.wordpress.org/ticket/50177

@audrasjb
4 years ago

Attachment e5c5c516c14ad910434c11932dcfcf57.gif added

After applying the above PR

#10 @audrasjb
4 years ago

Keywords commit added
Owner set to audrasjb
Status new → accepted

The above PR refreshes the patch against current trunk.
I think we're ready to ship this.

#11 @audrasjb
4 years ago

Resolution → fixed
Status accepted → closed

In 52649:

Administration: Add a top margin to Mail Server Port field on small screens.

This change fixes an overlapping issue on small screens in the Writing Settings screen.

Props pravinparmar2404, afercia, utz119, thimalw, sabernhardt, audrasjb.
Fixes #50177.

audrasjb commented on PR #2241:

4 years ago #12

Committed in https://core.trac.wordpress.org/changeset/52649

#13 @SergeyBiryukov
4 years ago

Resolution fixed
Status closed → reopened

This looks better now, but I think some further improvements could be made:

The selector seems a bit too specific, we could probably adjust it to account for other similar inputs.
Per the CSS coding standards, attribute selectors should use double quotes instead of single quotes.
3px still seems a bit too close, I think 5px would look better.

Maybe something like this would work?

.form-table .regular-text ~ input[type="text"].small-text {
	margin-top: 5px;
}

This ticket was mentioned in PR #2243 on WordPress/wordpress-develop by kebbet.

4 years ago #14

Trac ticket: https://core.trac.wordpress.org/ticket/50177

@pyrobd
4 years ago

Attachment 50177.2.diff added

After applying the suggested CSS

#15 @pyrobd
4 years ago

Here is the output https://prnt.sc/26pqjzs , but I think the mockup suggestion 50177-suggestion.png looked better, also this is my first patch just trying to see how this works, please ignore any mistakes :)

#16 @audrasjb
4 years ago

Keywords commit removed

@SergeyBiryukov thanks for reopening the ticket, I agree with your feedback.
Are you happy with PR#2243 proposed by kebbet? I think it addresses the underlined issues :)

#17 @audrasjb
4 years ago

Keywords commit added

The PR looks good to me. Self assigning for commit.

#18 @audrasjb
4 years ago

Resolution → fixed
Status reopened → closed

In 52801:

Administration: Further enhancements on small text fields after [52649].

This changeset replaces #mailserver_port to a more generic selector, fixes a coding standard issue, and adds a bigger margin to the field.

Follow-up to [52649].

Props SergeyBiryukov, kebbet, pyrobd.
Fixes #50177.

audrasjb commented on PR #2243:

4 years ago #19

Committed in https://core.trac.wordpress.org/changeset/52801

#20 @sabernhardt
4 years ago

#55502 was marked as a duplicate.

Note: See TracTickets for help on using tickets.

Download in other formats:

Make WordPress Core

Context Navigation

#50177 closed defect (bug) (fixed)

Writing Settings : Mail Server Port field overlap on small screens

Description

Attachments (10)

Change History (30)

@pravinparmar2404 6 years ago

#1 @pravinparmar2404 6 years ago

@afercia 6 years ago

#2 @afercia 6 years ago

@utz119 6 years ago

@utz119 6 years ago

@utz119 6 years ago

@utz119 6 years ago

#3 @utz119 6 years ago

#4 @utz119 6 years ago

@thimalw 6 years ago

@sabernhardt 6 years ago

#5 @sabernhardt 6 years ago

#6 @sabernhardt 4 years ago

#7 @sabernhardt 4 years ago

#8 @audrasjb 4 years ago

This ticket was mentioned in ​PR #2241 on ​WordPress/wordpress-develop by ​audrasjb. 4 years ago #9

@audrasjb 4 years ago

#10 @audrasjb 4 years ago

#11 @audrasjb 4 years ago

​audrasjb commented on ​PR #2241: 4 years ago #12

#13 @SergeyBiryukov 4 years ago

This ticket was mentioned in ​PR #2243 on ​WordPress/wordpress-develop by ​kebbet. 4 years ago #14

@pyrobd 4 years ago

#15 @pyrobd 4 years ago

#16 @audrasjb 4 years ago

#17 @audrasjb 4 years ago

#18 @audrasjb 4 years ago

​audrasjb commented on ​PR #2243: 4 years ago #19

#20 @sabernhardt 4 years ago

Download in other formats:

@pravinparmar2404
6 years ago

#1 @pravinparmar2404
6 years ago

@afercia
6 years ago

#2 @afercia
6 years ago

@utz119
6 years ago

@utz119
6 years ago

@utz119
6 years ago

@utz119
6 years ago

#3 @utz119
6 years ago

#4 @utz119
6 years ago

@thimalw
6 years ago

@sabernhardt
6 years ago

#5 @sabernhardt
6 years ago

#6 @sabernhardt
4 years ago

#7 @sabernhardt
4 years ago

#8 @audrasjb
4 years ago

This ticket was mentioned in PR #2241 on WordPress/wordpress-develop by audrasjb.

4 years ago #9

@audrasjb
4 years ago

#10 @audrasjb
4 years ago

#11 @audrasjb
4 years ago

audrasjb commented on PR #2241:

4 years ago #12

#13 @SergeyBiryukov
4 years ago

This ticket was mentioned in PR #2243 on WordPress/wordpress-develop by kebbet.

4 years ago #14

@pyrobd
4 years ago

#15 @pyrobd
4 years ago

#16 @audrasjb
4 years ago

#17 @audrasjb
4 years ago

#18 @audrasjb
4 years ago

audrasjb commented on PR #2243:

4 years ago #19

#20 @sabernhardt
4 years ago