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.

[andrewssanya]

Before

[andrewssanya]

After

[andrewssanya]

Before under pages

[andrewssanya]

After under pages

[andrewssanya]

Patch Testing Report

Patch Tested: https://core.trac.wordpress.org/ticket/64999

Environment

• WordPress: 7.1-alpha-62366
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 148.0.0.0 (Mobile)
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Used the Post section
2. Used the Page section

Screenshots/Screencast with results

There are still places where styles are breaking -

---

I think it would be better to tackle one screen at a time rather than doing all in one. What do you think, @t-hamano?
From this PR, maybe we can ship what's done and then tackle one screen at a time in subsequent PRs.

[audrasjb]

Ok so we have one commit waiting for backport, and several PRs that need review and testing.
My feeling is that we should just backport the patch already committed and move the rest of the ticket to 7.0.1.

Therefore I'm backporting [62294] right now.

[audrasjb]

In 62378:

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

Follow-up to [61646].

Reviewed by audrasjb.
Merges [62294] to the 7.0 branch.
Props abcd95, wildworks, mosescursor, sainathpoojary, SergeyBiryukov.
See #64999.

[audrasjb]

Moving to 7.0.1 for further improvements.

[audrasjb]

Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.

@himanshupathak95 Thanks for the update!

I think it would be better to tackle one screen at a time rather than doing all in one. What do you think, @t-hamano?

From this PR, maybe we can ship what's done and then tackle one screen at a time in subsequent PRs.

As far as I can see, this PR addresses most of the issues, so there isn't much additional work required, and I believe everything can be handled within this PR. However, there is a slight overlap between this PR and #11461. It might be best to update this PR after committing #11461 to address any remaining issues. #11461 should be ready for release soon.

​https://github.com/user-attachments/assets/64fd0deb-2cc7-4448-a0c0-2d4e85c3c479

@t-hamano In classic themes, there is also this Customizer screen issue that looks unaddressed. Do you think it can be taken up in a separate PR? Since this one already has a very long conversation.

[wildworks]

In 62400:

Admin Reskin: Fix mobile list table control heights.

On the mobile admin viewport, interactive elements on list table pages had inconsistent heights. Give them a consistent height.

Follow-up to [61645].

Props andrewssanya, sainathpoojary, wildworks.
See #64999.

[wildworks]

Here is the latest update on this ticket.

	trunk branch	7.0 branch
​PR 11497	Commited in r62294	Commited in r62378
​PR 11461	Commited in r62400	Needs second commenter's sign-off.
​PR 11750	Under review

This PR was committed in r62400.

@himanshupathak95, since ​https://github.com/WordPress/wordpress-develop/pull/11461 has been merged, can we resolve the conflicts with this PR? Thank you!

## Media Library

### Mobile View
​https://github.com/user-attachments/assets/7a3243aa-1f6f-4d96-8c57-116953a6a1ce

### Desktop View
​https://github.com/user-attachments/assets/f971274d-6a0a-4417-b932-687f181a5a05

## Themes

### Mobile View
​https://github.com/user-attachments/assets/192ba9c7-af9d-4ca3-97cb-dd9d6638aaea

### Desktop View
​https://github.com/user-attachments/assets/b279ea17-68ff-4ffa-b837-58b49c6d7b73

Thanks for the update, but just a little more adjustment is needed.

Theme preview > Install button

This button is special and is expected to be 32px in mobile layout, not 40px, due to the header having a reduced height. Adding the button-compact class applies a 40px height in the mobile layout via high CSS specificity. Perhaps we can remove the button-compact class from this button and apply min-height: 32px instead?

My apologies, this was my mistake. By removing .button-compact, the button height for the "Add Themes" unexpectedly changed from 32px to 40px.

We should probably restore the .button-compact class that was removed in 34b1f5f174bf9d9ac6d0eecb9bee9565bc80edaa.

Another issue we need to address is the theme action button.

The buttons that are automatically registered based on the menu also need the .button-compact class.

<details><summary>Diff</summary>

src/wp-admin/themes.php

@@ -381 +381 @@
                        $menu_hook           = get_plugin_page_hook( $submenu[ $item[2] ][0][2], $item[2] );
 
                        if ( file_exists( WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}" ) || ! empty( $menu_hook ) ) {
-                               $current_theme_actions[] = "<a class='button$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
+                               $current_theme_actions[] = "<a class='button button-compact$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
                        } else {
-                               $current_theme_actions[] = "<a class='button$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
+                               $current_theme_actions[] = "<a class='button button-compact$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
                        }
                } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
                        $menu_file = $item[2];
 
                        if ( current_user_can( 'customize' ) ) {
                                if ( 'custom-header' === $menu_file ) {
-                                       $current_theme_actions[] = "<a class='button hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
+                                       $current_theme_actions[] = "<a class='button button-compact hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
                                } elseif ( 'custom-background' === $menu_file ) {
-                                       $current_theme_actions[] = "<a class='button hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
+                                       $current_theme_actions[] = "<a class='button button-compact hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
                                }
                        }
 
@@ -402 +402 @@
                        }
 
                        if ( file_exists( ABSPATH . "wp-admin/$menu_file" ) ) {
-                               $current_theme_actions[] = "<a class='button$class' href='{$item[2]}'>{$item[0]}</a>";
+                               $current_theme_actions[] = "<a class='button button-compact$class' href='{$item[2]}'>{$item[0]}</a>";
                        } else {
-                               $current_theme_actions[] = "<a class='button$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
+                               $current_theme_actions[] = "<a class='button button-compact$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
                        }
                }
        }

</details>

I apologize for the delay in the review, but we would appreciate it if you could check it.

[wildworks]

In 62516:

Admin Reskin: Fix interactive control heights on mobile.

Give interactive elements a consistent 40px height in the admin mobile viewport on the Add Plugins, Media Library grid, Settings > General, and Add Themes screens.

Follow-up to [61645].

Props abcd95, wildworks.
Fixes #64999.

[wildworks]

Here is the latest update on this ticket. All issues have been resolved, but there are two commits that have not yet been backported to 7.0.

	trunk branch	7.0 branch
​PR 11497	Commited in r62294	Commited in r62378
​PR 11461	Commited in r62400	Needs second commenter's sign-off.
​PR 11750	Commited in r62516	Needs second commenter's sign-off.

[masteradhoc]

@cbravobernal Could you take care of the backporting for the commits Aki mentioned?

[joedolson]

Reviewed & approving [62400] and [62516] for backport to 7.0 branch.

[joedolson]

In 62602:

Admin Reskin: Fix mobile list table control heights.

On the mobile admin viewport, interactive elements on list table pages had inconsistent heights. Give them a consistent height.

Follow-up to [61645].

Reviewed by joedolson.
Merges [62400] to the 7.0 branch.

Props andrewssanya, sainathpoojary, wildworks.
See #64999.

[joedolson]

In 62603:

Admin Reskin: Fix interactive control heights on mobile.

Give interactive elements a consistent 40px height in the admin mobile viewport on the Add Plugins, Media Library grid, Settings > General, and Add Themes screens.

Follow-up to [61645].
Reviewed by joedolson.
Merges [62516] to the 7.0 branch.

Props abcd95, wildworks.
Fixes #64999.