Admin reskin: Form elements are not standardized in the mobile viewport.

[wildworks]

Related ticket: #64308

In the new admin design system, interactive elements are expected to have a base height of 24px, 32px, or 40px. Furthermore, in WordPress 6.9, most interactive elements were unified to a height of 40px in mobile views. However, in 7.0, many elements have inconsistent heights in mobile views. This ticket aims to identify and fix elements that do not adhere to the new standard sizes in mobile views.

[wildworks]

I think it will be difficult to resolve everything at once. I suggest submitting patches on a page-by-page or component-by-component basis.

Fixes inconsistent heights on interactive elements in the admin mobile viewport (≤782px) on list table pages (Posts, Pages, etc.).

Trac ticket: #64999

[abcd95]

https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/customize-widgets.css#L572

This element has height: 39px, but it lives inside @media screen and (max-height: 700px) and (min-width: 981px) so that's most probably a compact mode for small-screen desktops/laptops, not the mobile breakpoint. So just wante to confirm if its intentional compact sizing and out of scope for this ticket or not.

Thanks for the PR. Personally, I think it might be better to standardize on the 32px size.

Thanks for looking into this. 32px does look more mobile-centric. Incorporated in ​https://github.com/WordPress/wordpress-develop/pull/11497/commits/954f6c9f9073bbd27dbc1e5d5b056829a7dda908

Thanks for the update! However, I personally suggest the following two changes.

• I propose changing the button height to 32px for non-mobile viewports as well. The 40px button size feels too large for the customizer header.
• Use the new button-compact class: This should eliminate the need to hard-code various styles.

Thanks for the update! However, I personally suggest the following two changes.

• I propose changing the button height to 32px for non-mobile viewports as well. The 40px button size feels too large for the customizer header.
• Use the new button-compact class: This should eliminate the need to hard-code various styles.

Thanks for the feedback, @t-hamano!
I have now added the button-compact class to the button variations. The need for hardcoding styles is no longer needed now. Also updated the desktop margin from 3px to 7px to vertically center.

[wildworks]

We may not be able to fix all issues in the 7.0 release, but let's do our best to address as many as possible.

[abcd95]

Hello!

Here are the places that I investigated and confirmed no fix needed:

• common.css line 4244 — .wp-filter .button.drawer-toggle { height: 28px } in tablet media query: This is dead CSS. min-height: 40px from buttons.css mobile base already wins, rendering the element at exactly 40px. No change required.
• list-tables.css line 1908 — .view-switch a at 36px: Parent is display: none on mobile. Not visible to users.
• customize-widgets.css — .widget-reorder-nav span: This is in a desktop compact media query (min-width: 783px and max-width: 1100px), not the mobile breakpoint. Out of scope.

found soem dead CSS also -

• edit.css:1883 — .post-format-options a div: No PHP/JS generates this markup
• edit.css:1976 — .wp_themeSkin a.mceButton: Legacy TinyMCE 3.x selector; WordPress uses TinyMCE 4.x

I am not sure regarding this place - https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/customize-controls.css#L2890

Do we need to update this too?

[mosescursor]

Upon inspection, I actually agree more with @abcd95. This fix is actually not needed. I have not seen the consistency in bug behavior

Environment

• WordPress: 7.1-alpha-20260427.062049
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Brave 1.88.136 (Official Build) (arm64)
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

[SergeyBiryukov]

In 62294:

Admin Reskin: Standardize theme install overlay button height on mobile.

Follow-up to [61646].

Props abcd95, wildworks, mosescursor, sainathpoojary, SergeyBiryukov.
See #64999.

Thanks for the PR! Merged in r62294.

[wildworks]

I propose to backport [62294] to 7.0, as this will align the customizer's publish button with its size. See [62295].

[mosescursor]

Replying to wildworks:

I propose to backport [62294] to 7.0, as this will align the customizer's publish button with its size. See [62295].

I will agree with @wildworks on this

[wildworks]

It seems that [62294] can be backported to 7.0. However, please note that [62294] alone cannot close this ticket, as there are still many issues to address within this ticket.

[wildworks]

This is a second committer sign-off. Approving [62294] for 7.0 backport.

[jorbin]

I think It would be best to get all of the remaining issues resolved so that it can be backported in one go before the next beta

[jorbin]

Moving up in priority since as @wildworks notes "there are still many issues to address within this ticket"

[wildworks]

The priority for correction should be the unintended reduction in the height of interactive elements to less than 40px in the mobile layout due to the application of the new design system.

I don't think elements that weren't previously 40px need to be standardized to 40px right away.

[abcd95]

I was taking a look at addressing some of the remaining issues for this ticket, specifically investigating .customize-control .date-time-fields select, which is hardcoded to height: 39px in the mobile. Upon inspecting the computed styles, the element actually resolves to a total height of 40px, and this happens because the global min-height of 40px is applied to select from the core forms. Everything else appears to either be intentional or correctly saved by the global min-height.

could you point out which specific pages or components you have noticed are still experiencing the unintended height reduction to less than 40px?

[wildworks]

could you point out which specific pages or components you have noticed are still experiencing the unintended height reduction to less than 40px?

I used AI to identify interactive elements that were unintentionally made smaller than 40px.

• Appearance > Themes: Search field
• Plugins > Add Plugin: Search field, Keyword dropdown, Pager input field, Install button
• Media Library > Grid: Filter dropdown, Bulk select button, Search field
• General Settings > Date format input field, Time format input field

[wildworks]

buttom-size-comparison

[wildworks]

I propose that we address all issues with the following two PRs:

• ​PR 11461: This focuses on fixing the list table page.
• Submit a new PR to fix all other issues.

After these two are addressed, we can backport these two commits to 7.0 in a single commit.

[wildworks]

Perhaps it might be better to introduce utility classes for form elements first. See #65207.

This would also make it easier to address this ticket. Fortunately, there are no major layout issues on the mobile layout, so let's revert the priority to normal.

Thanks @t-hamano for the suggestions and catching the leftovers.

I've tried to use classes and avoid hardcoding as much as possible.

Area	Before	After
Theme Activate Button
Plugin Install Button

Mode	Before	After
Grid Mode	<video src="​https://github.com/user-attachments/assets/73392b1d-cc37-456d-bc96-fcabc3f616b9" controls width="420"></video>	<video src="​https://github.com/user-attachments/assets/d8b4eca6-0027-4e7e-af53-611a55e0edfe" controls width="420"></video>
List Mode	<video src="​https://github.com/user-attachments/assets/b00914c7-6db0-4aa7-95f4-d930e7f1c7ca" controls width="420"></video>	<video src="​https://github.com/user-attachments/assets/638e7e4f-3296-4544-9b40-4279adbb2126" controls width="420"></video>

Thanks @t-hamano for the reply.

Please note that on mobile layouts, the button height is generally 40px. Therefore, the button height in the following layout is incorrect.
The .button-compact class should also be usable in these areas.

I intentionally made them 32px in size since you asked the same in ​https://github.com/WordPress/wordpress-develop/pull/11750#pullrequestreview-4268836283, specifically -

Install Themes: These buttons should be 32px in size.
Install Plugins: These buttons should be 32px in size.

I also feel like they should have .button-compact class and should be 40px for consistency, but your review suggested otherwise. So, just to be sure, we still want this to be 40px, right?

I intentionally made them 32px in size since you asked the same in ​https://github.com/WordPress/wordpress-develop/pull/11750#pullrequestreview-4268836283, specifically -

Install Themes: These buttons should be 32px in size.
Install Plugins: These buttons should be 32px in size.

I also feel like they should have .button-compact class and should be 40px for consistency, but your review suggested otherwise. So, just to be sure, we still want this to be 40px, right?

Apologies, there was an error in my explanation. What I meant to say is that all buttons should always be 40px on mobile. This means that a button with a 32px size in the desktop layout should change to a 40px size in the mobile layout. To achieve this, I wanted to suggest that the "button-compact" CSS class would be appropriate.

[wildworks]

The issue we are trying to resolve with this ticket is not critical. It does not prevent the functionality of the mobile layout and simply corrects the height of an interactive element. It can likely be postponed to 7.0.1 without any issues.