Make WordPress Core

Opened 4 years ago

Closed 2 years ago

Last modified 2 years 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 4 years ago.
Mockup suggestion
post-via-email-port.jpg (42.2 KB) - added by sabernhardt 4 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 2 years ago.
After applying the above PR
50177.2.diff (612 bytes) - added by pyrobd 2 years 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
4 years ago

Mockup suggestion

@sabernhardt
4 years ago

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

#5 @sabernhardt
4 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
2 years ago

#54942 was marked as a duplicate.

#7 @sabernhardt
2 years ago

  • Milestone changed from Awaiting Review to 6.0

#8 @audrasjb
2 years ago

  • Keywords needs-refresh added

Refreshing the patch right now.

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


2 years ago
#9

  • Keywords needs-refresh removed

@audrasjb
2 years ago

After applying the above PR

#10 @audrasjb
2 years 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
2 years 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
2 years 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
2 years ago

After applying the suggested CSS

#15 @pyrobd
2 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
2 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
2 years ago

  • Keywords commit added

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

#18 @audrasjb
2 years 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
2 years ago

#55502 was marked as a duplicate.

Note: See TracTickets for help on using tickets.