Writing Settings : Mail Server Port field overlap on small screens

[pravinparmar2404]

Mail Server Port field overlap on small screens

[pravinparmar2404]

#50176 was marked as a duplicate.

[afercia]

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]

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

[utz119]

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

[thimalw]

Mockup suggestion

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

#54942 was marked as a duplicate.

[audrasjb]

Refreshing the patch right now.

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

[audrasjb]

After applying the above PR

[audrasjb]

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

[audrasjb]

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.

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

[SergeyBiryukov]

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;
}

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

[pyrobd]

After applying the suggested CSS

[pyrobd]

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

[audrasjb]

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

[audrasjb]

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

[audrasjb]

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.

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

[sabernhardt]

#55502 was marked as a duplicate.