Skip to content

Admin: Standardize mobile viewport heights for interactive elements #11750

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
himanshupathak95 wants to merge 17 commits into
base: trunk
Choose a base branch
from
Open

Admin: Standardize mobile viewport heights for interactive elements #11750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
bc87c16
Forms: increase ht to 40px
himanshupathak95 May 7, 2026
f3ac21f
Add plugin: Increase min-height of form and dropdown to 40px
himanshupathak95 May 7, 2026
2adecb5
Media library: Increase min-ht to 40px
himanshupathak95 May 7, 2026
f01d6d2
Enhance select mode toggle button styling by adding 'button-compact' …
himanshupathak95 May 12, 2026
dc4beec
Increase button font size to improve readability in action links
himanshupathak95 May 12, 2026
3db429c
Remove min-height and padding adjustments for classnames
himanshupathak95 May 12, 2026
2268f5e
Increase font size of search loading indicator for better readability
himanshupathak95 May 12, 2026
deca256
Enhance filter button styling by adding 'button-compact' class
himanshupathak95 May 12, 2026
2a7026e
Enhance search button styling by adding 'button-compact' class
himanshupathak95 May 12, 2026
863351b
Remove margin-bottom from button styles for improved layout consistency
himanshupathak95 May 12, 2026
add68c9
Add button-compact class to empty trash button
himanshupathak95 May 14, 2026
6b9341f
Restore 4px buttons margin
himanshupathak95 May 14, 2026
290bb4f
Remove hardcoded 32px button styles
himanshupathak95 May 14, 2026
bc2280d
Add button compact class to plugins and themes button
himanshupathak95 May 14, 2026
f3ed114
Add button-compact class to theme activation and installation buttons
himanshupathak95 May 19, 2026
84114d6
Merge branch 'trunk' into fix/64999-mobile-form-elements
himanshupathak95 May 22, 2026
c38a092
Merge branch 'trunk' into fix/64999-mobile-form-elements
t-hamano May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/js/media/views/button/select-mode-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto

render: function() {
Button.prototype.render.apply( this, arguments );
this.$el.addClass( 'select-mode-toggle-button' );
this.$el.addClass( 'select-mode-toggle-button button-compact' );
return this;
},

Expand Down
11 changes: 11 additions & 0 deletions src/wp-admin/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1417,6 +1417,17 @@ th.action-links {
padding: 0;
width: 50%;
}

.wp-filter .search-form input[type="search"] {
min-height: 40px;
padding: 0 12px;
}

.wp-filter .search-form select,
.wp-filter .filter-items select {
min-height: 40px;
padding: 0 24px 0 12px;
}
}

@media only screen and (max-width: 320px) {
Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/css/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1944,6 +1944,7 @@ table.form-table td .updated p {
.options-general-php input[type="text"].small-text {
max-width: 6.25em;
margin: 0;
min-height: 40px;
}

/* Privacy Policy settings screen */
Expand Down
7 changes: 0 additions & 7 deletions src/wp-admin/css/list-tables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1586,13 +1586,6 @@ div.action-links,
margin: 0; /* Override existing margins */
}

/* Use compact size for space-constrained plugin cards */
.plugin-action-buttons li .button {
min-height: 32px;
line-height: 2.30769231; /* 30px for 32px min-height */
padding: 0 12px;
}

.plugin-card h3 {
margin: 0 12px 16px 0;
font-size: 18px;
Expand Down
10 changes: 10 additions & 0 deletions src/wp-admin/css/media.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1413,6 +1413,16 @@ audio, video {
top: 46px;
right: 10px;
}

.media-frame.mode-grid .media-toolbar select {
min-height: 40px;
padding: 0 24px 0 12px;
}

.media-frame.mode-grid .media-toolbar input[type="search"] {
min-height: 40px;
padding: 0 12px;
}
}

@media only screen and (max-width: 600px) {
Expand Down
3 changes: 0 additions & 3 deletions src/wp-admin/css/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,6 @@ body.js .theme-browser.search-loading {
.theme-browser .theme .theme-actions .button {
float: none;
margin-left: 3px;
min-height: 32px;
line-height: 2.30769231; /* 30px for 32px min-height */
padding: 0 12px;
Comment on lines -122 to -124
Copy link
Copy Markdown
Contributor

@t-hamano t-hamano May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Author

@himanshupathak95 himanshupathak95 May 19, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I completely missed this. I apologize for the increasing iterations!
There are a lot of places to look, at a lot of different breakpoints.

}

.theme-browser .theme .theme-actions .button.updated-message::before,
Expand Down
6 changes: 3 additions & 3 deletions src/wp-admin/includes/class-wp-media-list-table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,12 +242,12 @@ protected function extra_tablenav( $which ) {
/** This action is documented in wp-admin/includes/class-wp-posts-list-table.php */
do_action( 'restrict_manage_posts', $this->screen->post_type, $which );

submit_button( __( 'Filter' ), 'button-compact', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
submit_button( __( 'Filter' ), 'button-compact', 'filter_action', false );
Copy link
Copy Markdown
Contributor

@t-hamano t-hamano May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think post-query-submit should be removed. Otherwise, this margin will not be applied, which will cause an unintended layout collapse.

Access the trash bin view from the media view. There is no space between the Filter button and the Empty Trash button.

Image

There is a margin applied below the Filter button, causing it to misalign with the select element.

Image


if ( $this->is_trash && $this->has_items()
&& current_user_can( 'edit_others_posts' )
) {
submit_button( __( 'Empty Trash' ), 'apply', 'delete_all', false );
submit_button( __( 'Empty Trash' ), 'apply button-compact', 'delete_all', false );
}
?>
</div>
Expand Down Expand Up @@ -351,7 +351,7 @@ public function views() {
?>
</label>
<input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
<input id="search-submit" type="submit" class="button" value="<?php esc_attr_e( 'Search Media' ); ?>">
<input id="search-submit" type="submit" class="button button-compact" value="<?php esc_attr_e( 'Search Media' ); ?>">
</p>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/wp-admin/includes/plugin-install.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -940,7 +940,7 @@ function wp_get_plugin_action_button( $name, $data, $compatible_php, $compatible
if ( $status['url'] ) {
if ( $compatible_php && $compatible_wp && $all_plugin_dependencies_installed && ! empty( $data->download_link ) ) {
$button = sprintf(
'<a class="install-now button" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
'<a class="install-now button button-compact" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
esc_attr( $data->slug ),
esc_url( $status['url'] ),
/* translators: %s: Plugin name and version. */
Expand All @@ -950,7 +950,7 @@ function wp_get_plugin_action_button( $name, $data, $compatible_php, $compatible
);
} else {
$button = sprintf(
'<button type="button" class="install-now button button-disabled" disabled="disabled">%s</button>',
'<button type="button" class="install-now button button-compact button-disabled" disabled="disabled">%s</button>',
_x( 'Install Now', 'plugin' )
);
}
Expand All @@ -961,7 +961,7 @@ function wp_get_plugin_action_button( $name, $data, $compatible_php, $compatible
if ( $status['url'] ) {
if ( $compatible_php && $compatible_wp ) {
$button = sprintf(
'<a class="update-now button aria-button-if-js" data-plugin="%s" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
'<a class="update-now button button-compact aria-button-if-js" data-plugin="%s" data-slug="%s" href="%s" aria-label="%s" data-name="%s" role="button">%s</a>',
esc_attr( $status['file'] ),
esc_attr( $data->slug ),
esc_url( $status['url'] ),
Expand All @@ -972,7 +972,7 @@ function wp_get_plugin_action_button( $name, $data, $compatible_php, $compatible
);
} else {
$button = sprintf(
'<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
'<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
_x( 'Update Now', 'plugin' )
);
}
Expand All @@ -983,7 +983,7 @@ function wp_get_plugin_action_button( $name, $data, $compatible_php, $compatible
case 'newer_installed':
if ( is_plugin_active( $status['file'] ) ) {
$button = sprintf(
'<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
'<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
_x( 'Active', 'plugin' )
);
} elseif ( current_user_can( 'activate_plugin', $status['file'] ) ) {
Expand All @@ -1008,7 +1008,7 @@ function wp_get_plugin_action_button( $name, $data, $compatible_php, $compatible
}

$button = sprintf(
'<a href="%1$s" data-name="%2$s" data-slug="%3$s" data-plugin="%4$s" class="button button-primary activate-now" aria-label="%5$s" role="button">%6$s</a>',
'<a href="%1$s" data-name="%2$s" data-slug="%3$s" data-plugin="%4$s" class="button button-compact button-primary activate-now" aria-label="%5$s" role="button">%6$s</a>',
esc_url( $activate_url ),
esc_attr( $name ),
esc_attr( $data->slug ),
Expand All @@ -1018,13 +1018,13 @@ function wp_get_plugin_action_button( $name, $data, $compatible_php, $compatible
);
} else {
$button = sprintf(
'<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
'<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
is_network_admin() ? _x( 'Network Activate', 'plugin' ) : _x( 'Activate', 'plugin' )
);
}
} else {
$button = sprintf(
'<button type="button" class="button button-disabled" disabled="disabled">%s</button>',
'<button type="button" class="button button-compact button-disabled" disabled="disabled">%s</button>',
_x( 'Installed', 'plugin' )
);
}
Expand Down
24 changes: 12 additions & 12 deletions src/wp-admin/theme-install.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,34 +408,34 @@
?>
<# if ( data.activate_url ) { #>
<# if ( ! data.active ) { #>
<a class="button button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
<a class="button button-compact button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
<# } else { #>
<button class="button button-primary disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
<button class="button button-compact button-primary disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
<# } #>
<# } #>
<# if ( data.customize_url ) { #>
<# if ( ! data.active ) { #>
<# if ( ! data.block_theme ) { #>
<a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a>
<a class="button button-compact load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a>
<# } #>
<# } else { #>
<a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Customize' ); ?></a>
<a class="button button-compact load-customize" href="{{ data.customize_url }}"><?php _e( 'Customize' ); ?></a>
<# } #>
<# } else { #>
<button class="button preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<button class="button button-compact preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<# } #>
<# } else { #>
<?php
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
?>
<# if ( data.activate_url ) { #>
<a class="button button-primary disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
<a class="button button-compact button-primary disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
<# } #>
<# if ( data.customize_url ) { #>
<a class="button disabled"><?php _e( 'Live Preview' ); ?></a>
<a class="button button-compact disabled"><?php _e( 'Live Preview' ); ?></a>
<# } else { #>
<button class="button disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<button class="button button-compact disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<# } #>
<# } #>
<# } else { #>
Expand All @@ -444,15 +444,15 @@
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Install %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a>
<button class="button preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<a class="button button-compact button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a>
<button class="button button-compact preview install-theme-preview"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<# } else { #>
<?php
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Cannot Install %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary disabled" data-name="{{ data.name }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Install', 'theme' ); ?></a>
<button class="button disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<a class="button button-compact button-primary disabled" data-name="{{ data.name }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Install', 'theme' ); ?></a>
<button class="button button-compact disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
<# } #>
<# } #>
</div>
Expand Down
32 changes: 16 additions & 16 deletions src/wp-admin/themes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -609,7 +609,7 @@
/* translators: %s: Theme name. */
$customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), $theme['name'] );
?>
<a class="button button-primary customize load-customize hide-if-no-customize"
<a class="button button-compact button-primary customize load-customize hide-if-no-customize"
href="<?php echo esc_url( $theme['actions']['customize'] ); ?>"
aria-label="<?php echo esc_attr( $customize_aria_label ); ?>"
><?php _e( 'Customize' ); ?></a>
Expand All @@ -619,7 +619,7 @@
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button activate"
<a class="button button-compact activate"
href="<?php echo esc_url( $theme['actions']['activate'] ); ?>"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
><?php _e( 'Activate' ); ?></a>
Expand All @@ -630,7 +630,7 @@
/* translators: %s: Theme name. */
$live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary load-customize hide-if-no-customize"
<a class="button button-compact button-primary load-customize hide-if-no-customize"
href="<?php echo esc_url( $theme['actions']['customize'] ); ?>"
aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
><?php _e( 'Live Preview' ); ?></a>
Expand All @@ -640,7 +640,7 @@
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button disabled"
<a class="button button-compact disabled"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
><?php _ex( 'Cannot Activate', 'theme' ); ?></a>

Expand All @@ -649,7 +649,7 @@
/* translators: %s: Theme name. */
$live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary hide-if-no-customize disabled"
<a class="button button-compact button-primary hide-if-no-customize disabled"
aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
><?php _e( 'Live Preview' ); ?></a>
<?php } ?>
Expand Down Expand Up @@ -1001,7 +1001,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary customize load-customize hide-if-no-customize"
<a class="button button-compact button-primary customize load-customize hide-if-no-customize"
href="{{{ data.actions.customize }}}"
aria-label="<?php echo esc_attr( $customize_aria_label ); ?>"
><?php _e( 'Customize' ); ?></a>
Expand All @@ -1012,7 +1012,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button activate"
<a class="button button-compact activate"
href="{{{ data.actions.activate }}}"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
><?php _e( 'Activate' ); ?></a>
Expand All @@ -1021,7 +1021,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary load-customize hide-if-no-customize"
<a class="button button-compact button-primary load-customize hide-if-no-customize"
href="{{{ data.actions.customize }}}"
aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
><?php _e( 'Live Preview' ); ?></a>
Expand All @@ -1030,15 +1030,15 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button disabled"
<a class="button button-compact disabled"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
><?php _ex( 'Cannot Activate', 'theme' ); ?></a>

<?php
/* translators: %s: Theme name. */
$live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary hide-if-no-customize disabled"
<a class="button button-compact button-primary hide-if-no-customize disabled"
aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
><?php _e( 'Live Preview' ); ?></a>
<# } #>
Expand Down Expand Up @@ -1251,7 +1251,7 @@ function wp_theme_auto_update_setting_template() {

<div class="theme-actions">
<div class="active-theme">
<a class="button button-primary customize load-customize hide-if-no-customize"
<a class="button button-compact button-primary customize load-customize hide-if-no-customize"
href="{{{ data.actions.customize }}}"
><?php _e( 'Customize' ); ?></a>
<?php echo implode( ' ', $current_theme_actions ); ?>
Expand All @@ -1263,7 +1263,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary load-customize hide-if-no-customize"
<a class="button button-compact button-primary load-customize hide-if-no-customize"
href="{{{ data.actions.customize }}}"
aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
><?php _e( 'Live Preview' ); ?></a>
Expand All @@ -1273,7 +1273,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button activate"
<a class="button button-compact activate"
href="{{{ data.actions.activate }}}"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
><?php _e( 'Activate' ); ?></a>
Expand All @@ -1283,7 +1283,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button button-primary hide-if-no-customize disabled"
<a class="button button-compact button-primary hide-if-no-customize disabled"
aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>"
><?php _e( 'Live Preview' ); ?></a>

Expand All @@ -1292,7 +1292,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button disabled"
<a class="button button-compact disabled"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
<# } #>
Expand All @@ -1304,7 +1304,7 @@ function wp_theme_auto_update_setting_template() {
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Delete %s', 'theme' ), '{{ data.name }}' );
?>
<a class="button delete-theme"
<a class="button button-compact delete-theme"
href="{{{ data.actions['delete'] }}}"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
><?php _e( 'Delete' ); ?></a>
Expand Down
Loading