Make WordPress Core

Opened 4 years ago

Closed 21 months ago

Last modified 20 months ago

#50177 closed defect (bug) (fixed)

Writing Settings : Mail Server Port field overlap on small screens

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

Description


Attachments (10)

writing-settings-overlap-small-screens.png (34.4 KB) - added by pravinparmar2404 4 years ago.
Mail Server Port field overlap on small screens
50177.png (117.5 KB) - added by afercia 4 years ago.
forms.diff (31.0 KB) - added by utz119 4 years ago.
screenshot-mailserver.png (266.9 KB) - added by utz119 4 years ago.
For the version 5.3. Margin 3px is added on the top.
50177.diff (767 bytes) - added by utz119 4 years ago.
50177.1.diff (332 bytes) - added by utz119 4 years ago.
50177-suggestion.png (71.1 KB) - added by thimalw 3 years ago.
Mockup suggestion
post-via-email-port.jpg (42.2 KB) - added by sabernhardt 3 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 22 months ago.
After applying the above PR
50177.2.diff (612 bytes) - added by pyrobd 22 months ago.
After applying the suggested CSS

Change History (30)

@pravinparmar2404
4 years ago

Mail Server Port field overlap on small screens

#1 @pravinparmar2404
4 years ago

#50176 was marked as a duplicate.

@afercia
4 years ago

#2 @afercia
4 years ago

  • Component changed from Options, Meta APIs to Administration
  • Focuses administration removed
  • Version changed from 5.4.1 to 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
4 years ago

@utz119
4 years ago

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

@utz119
4 years ago

@utz119
4 years ago

#3 @utz119
4 years ago

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

#4 @utz119
4 years ago

  • Keywords has-patch added

@thimalw
3 years ago

Mockup suggestion

@sabernhardt
3 years ago

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

#5 @sabernhardt
3 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
22 months ago

#54942 was marked as a duplicate.

#7 @sabernhardt
22 months ago

  • Milestone changed from Awaiting Review to 6.0

#8 @audrasjb
22 months ago

  • Keywords needs-refresh added

Refreshing the patch right now.

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


22 months ago
#9

  • Keywords needs-refresh removed

@audrasjb
22 months ago

After applying the above PR

#10 @audrasjb
22 months ago

  • Keywords commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

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

#11 @audrasjb
22 months ago

  • Resolution set to fixed
  • Status changed from accepted to 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.

#13 @SergeyBiryukov
22 months ago

  • Resolution fixed deleted
  • Status changed from closed to 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;
}

@pyrobd
22 months ago

After applying the suggested CSS

#15 @pyrobd
22 months 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
22 months 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
21 months ago

  • Keywords commit added

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

#18 @audrasjb
21 months ago

  • Resolution set to fixed
  • Status changed from reopened to 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.

#20 @sabernhardt
20 months ago

#55502 was marked as a duplicate.

Note: See TracTickets for help on using tickets.