Admin: Standardize mobile viewport heights for interactive elements on list table pages

[SainathPoojary]

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

2026-04-08.13-45-37.mp4

Trac ticket: #64999

[github-actions]

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]

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 sainathpoojary, wildworks.

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

[t-hamano]

Suggested change

	#screen-meta-links .show-settings {
	box-sizing: border-box;
	min-height: 40px;
	line-height: 2.71428571;
	}
	#screen-meta-links .show-settings:after {
	font: normal 20px/1.9 dashicons;
	}

I think we should use the button-compact class instead of hardcoding override styles in the mobile layout. This button is 32px in size and will automatically scale to 40px in the mobile layout.

wordpress-develop/src/wp-includes/css/buttons.css

Line 383 in 8a99228

.wp-core-ui .button.button-compact,

Therefore, simply adding button-compact to the following locations should resolve the issue.

wordpress-develop/src/wp-admin/includes/class-wp-screen.php

Line 972 in 8a99228

<button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></button>

wordpress-develop/src/wp-admin/includes/class-wp-screen.php

Line 979 in 8a99228

<button type="button" id="contextual-help-link" class="button show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></button>

[t-hamano]

We should be able to use the button-compact class instead.

Additionally, the height of the text field needs to be changed from 32px to 40px.

[t-hamano]

To avoid such overwrites, I believe we should remove min-height, line-height, and padding from these buttons in the first place:

wordpress-develop/src/wp-admin/css/forms.css

Lines 521 to 528 in 8a99228

	#doaction,
	#doaction2,
	#post-query-submit {
	margin: 0 8px 0 0;
	min-height: 32px;
	line-height: 2.30769231; /* 30px for 32px height with 13px font */
	padding: 0 12px;
	}

Instead, we should be able to use button-compact class.

[t-hamano]

Are these styles really necessary?