WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 2 months ago

#50177 new defect (bug)

Writing Settings : Mail Server Port field overlap on small screens

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

Description


Attachments (8)

writing-settings-overlap-small-screens.png​ (34.4 KB) - added by pravinparmar2404 8 months ago.
Mail Server Port field overlap on small screens
50177.png​ (117.5 KB) - added by afercia 8 months ago.
forms.diff​ (31.0 KB) - added by utz119 8 months ago.
screenshot-mailserver.png​ (266.9 KB) - added by utz119 8 months ago.
For the version 5.3. Margin 3px is added on the top.
50177.diff​ (767 bytes) - added by utz119 8 months ago.
50177.1.diff​ (332 bytes) - added by utz119 8 months ago.
50177-suggestion.png​ (71.1 KB) - added by thimalw 7 months ago.
Mockup suggestion
post-via-email-port.jpg​ (42.2 KB) - added by sabernhardt 2 months ago.
keeping the Port input's size small, plus the previous suggestion of moving the input below its label

Download all attachments as: .zip

Change History (13)

@pravinparmar2404
8 months ago

Mail Server Port field overlap on small screens

#1 @pravinparmar2404
8 months ago

#50176 was marked as a duplicate.

@afercia
8 months ago

#2 @afercia
8 months 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
8 months ago

@utz119
8 months ago

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

@utz119
8 months ago

@utz119
8 months ago

#3 @utz119
8 months ago

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

#4 @utz119
8 months ago

  • Keywords has-patch added

@thimalw
7 months ago

Mockup suggestion

@sabernhardt
2 months ago

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

#5 @sabernhardt
2 months 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.)

Note: See TracTickets for help on using tickets.