Make WordPress Core

Opened 7 months ago

Last modified 2 months ago

#49233 assigned defect (bug)

Settings admin screens: form fields issue on small screens

Reported by: passoniate Owned by: audrasjb
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots
Focuses: ui, css Cc:


Settings admin screens: form fields issue on small screens

Attachments (4)

general.png (27.7 KB) - added by passoniate 7 months ago.
writing.png (23.1 KB) - added by passoniate 7 months ago.
radio buttons.png (152.5 KB) - added by afercia 7 months ago.
49233 writign settings comparison.png (79.1 KB) - added by afercia 6 months ago.

Download all attachments as: .zip

Change History (11)

7 months ago

7 months ago

#1 @passoniate
7 months ago

for second issue

@media screen and (max-width: 782px)
.form-table input[type=text].small-text, input[type=number].small-text, input[type=password].small-text, input[type=search].small-text, input[type=text].small-text {
    width: auto;
    max-width: 4.375em;
    display: inline;
    padding: 3px 6px;
    margin: 3px 3px;

#2 @audrasjb
7 months ago

Yes, but please note that your selector will apply on a big number of places in WP Admin. It has to be tested on all WordPress Admin screens to ensure there is no regression at all.

#3 @afercia
7 months ago

@passoniate I wasn't able to reproduce the radio buttons overlapping. See attached screenshot. Can you confirm that the bug still exists with the default theme (Twenty Twenty) activated and all other plugins deactivated?

#4 @passoniate
6 months ago

Respectable @afercia yes now this bug is fixed

#5 @afercia
6 months ago

  • Focuses accessibility removed
  • Version 5.3.2 deleted

Thanks @passionate. So the only thing to improve is the vertical spacing between form fields on mobile. I think this is a general issue in WordPress though and not limited to the Writing settings page.

It would be nice to address this issue throughout the admin UI: when input fields are stacked vertically they should have some vertical spacing. This would require more standardization and removal of various "exceptions" that were introduced over time to improve the desktop layout, at the cost of a non-optimal mobile layout

For history, see a comparison of this specific case in the screenshot attached below. On the left: WordPress 5.2. On the right: WordPress 5.3.

#6 @passoniate
2 months ago

#50362 was marked as a duplicate.

#7 @SergeyBiryukov
2 months ago

#50362 was marked as a duplicate.

Note: See TracTickets for help on using tickets.