Make WordPress Core

Opened 2 years ago

Last modified 20 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:

Description

Settings admin screens: form fields issue on small screens

Attachments (4)

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

Download all attachments as: .zip

Change History (11)

@passoniate
2 years ago

@passoniate
2 years ago

#1 @passoniate
2 years 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
2 years 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
2 years 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?

@afercia
2 years ago

#4 @passoniate
2 years ago

Respectable @afercia yes now this bug is fixed

#5 @afercia
2 years 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
20 months ago

#50362 was marked as a duplicate.

#7 @SergeyBiryukov
20 months ago

#50362 was marked as a duplicate.

Note: See TracTickets for help on using tickets.