Settings admin screens: form fields issue on small screens

[passoniate]

Settings admin screens: form fields issue on small screens

[passoniate]

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;
}

[audrasjb]

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.

[afercia]

@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?

[passoniate]

Respectable @afercia yes now this bug is fixed

[afercia]

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.

[passoniate]

#50362 was marked as a duplicate.

[SergeyBiryukov]

#50362 was marked as a duplicate.