Admin: Standardize mobile viewport heights for interactive elements by himanshupathak95 · Pull Request #11750 · WordPress/wordpress-develop

himanshupathak95 · 2026-05-07T13:41:07Z

Trac ticket: https://core.trac.wordpress.org/ticket/64999

This PR fixes inconsistent interactive element heights to 40px in the admin mobile viewport (≤782px) on:

Plugins > Add Plugin: search field, Keyword dropdown, Install button
Media Library > Grid: filter dropdowns, search field, Bulk select button
Settings > General: Custom date format and time format inputs

Follow-up to [62294].

Tested in Chrome at 782px viewport width (mobile emulation). Before/after
screenshots attached.

Screen / Component	Before	After
Add Themes > Search field
Settings > General > Custom date/time format inputs
Plugins > Add Plugin > Search field
Plugins > Add Plugin > Keyword dropdown
Media Library > Grid > Filter dropdowns
Media Library > Grid > Search input
Media Library > Grid > Bulk select button

github-actions · 2026-05-07T13:45:51Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

github-actions · 2026-05-08T08:56:34Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props abcd95, wildworks.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

t-hamano

Thanks for the PR! It looks good for the most part, but there are a few points that need further adjustment.

Media Library (List view): We should be able to use the button-compact class on these two buttons without writing any CSS.

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

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

himanshupathak95 · 2026-05-12T07:42:31Z

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	Screen.Recording.2026-05-12.at.13.00.25.mov	Screen.Recording.2026-05-12.at.12.58.19.mov
List Mode	Screen.Recording.2026-05-12.at.13.00.43.mov	Screen.Recording.2026-05-12.at.12.57.58.mov

t-hamano

Thanks for the update!

Please note that on mobile layouts, the button height is generally 40px. Therefore, the button height in the following layout is incorrect.

Theme Activate Button:

Plugin Install Button:

The .buttom-compact class should also be usable in these areas.

himanshupathak95 · 2026-05-13T08:40:39Z

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 #11750 (review), 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?

t-hamano · 2026-05-13T08:59:25Z

I intentionally made them 32px in size since you asked the same in #11750 (review), 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.

…class

t-hamano · 2026-05-18T11:39:54Z

-	min-height: 32px;
-	line-height: 2.30769231; /* 30px for 32px min-height */
-	padding: 0 12px;


This change is not intended. On the desktop layout, the button size changes from 32px to 40px. Along with the removal of these styles, each button needs the button-compact class. This will ensure that the button height is 32px on the desktop layout and 40px on the mobile layout.

The file to be edited is likely theme-install.php.

himanshupathak95 force-pushed the fix/64999-mobile-form-elements branch from dca69f9 to 220cc0c Compare May 8, 2026 08:53

himanshupathak95 marked this pull request as ready for review May 8, 2026 08:56

t-hamano force-pushed the fix/64999-mobile-form-elements branch from 220cc0c to 3f78edc Compare May 12, 2026 02:21

t-hamano reviewed May 12, 2026

View reviewed changes

Comment thread src/wp-admin/css/media.css Outdated

himanshupathak95 force-pushed the fix/64999-mobile-form-elements branch 2 times, most recently from 2545903 to c4e83fc Compare May 12, 2026 07:24

t-hamano reviewed May 12, 2026

View reviewed changes

Comment thread src/wp-admin/includes/class-wp-media-list-table.php Outdated

Comment thread src/wp-admin/css/list-tables.css Outdated

Comment thread src/wp-includes/css/buttons.css

himanshupathak95 added 14 commits May 14, 2026 18:04

Forms: increase ht to 40px

b3e39ad

Add plugin: Increase min-height of form and dropdown to 40px

6543670

Media library: Increase min-ht to 40px

64b30b4

Enhance select mode toggle button styling by adding 'button-compact' …

d1f411f

…class

Increase button font size to improve readability in action links

a49b00a

Remove min-height and padding adjustments for classnames

ab8eae0

Increase font size of search loading indicator for better readability

85970e1

Enhance filter button styling by adding 'button-compact' class

e4d8185

Enhance search button styling by adding 'button-compact' class

43658cf

Remove margin-bottom from button styles for improved layout consistency

8aec621

Add button-compact class to empty trash button

411946d

Restore 4px buttons margin

d75402c

Remove hardcoded 32px button styles

ee68bd2

Add button compact class to plugins and themes button

139d9c4

himanshupathak95 force-pushed the fix/64999-mobile-form-elements branch from c4e83fc to 139d9c4 Compare May 14, 2026 12:34

t-hamano reviewed May 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Admin: Standardize mobile viewport heights for interactive elements#11750

Admin: Standardize mobile viewport heights for interactive elements#11750
himanshupathak95 wants to merge 14 commits into
WordPress:trunkfrom
himanshupathak95:fix/64999-mobile-form-elements

himanshupathak95 commented May 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

github-actions Bot commented May 8, 2026 •

edited

Loading

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

himanshupathak95 commented May 12, 2026

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

himanshupathak95 commented May 13, 2026

Uh oh!

t-hamano commented May 13, 2026

Uh oh!

t-hamano May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

himanshupathak95 commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 7, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

github-actions Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

himanshupathak95 commented May 12, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

himanshupathak95 commented May 13, 2026

Uh oh!

t-hamano commented May 13, 2026

Uh oh!

t-hamano May 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

himanshupathak95 commented May 7, 2026 •

edited

Loading

github-actions Bot commented May 8, 2026 •

edited

Loading