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 21 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
21 commits
Select commit Hold shift + click to select a range
5f5745c
Forms: increase ht to 40px
himanshupathak95 May 7, 2026
1567024
Add plugin: Increase min-height of form and dropdown to 40px
himanshupathak95 May 7, 2026
f750d89
Media library: Increase min-ht to 40px
himanshupathak95 May 7, 2026
e7afdfb
Enhance select mode toggle button styling by adding 'button-compact' …
himanshupathak95 May 12, 2026
0c9f461
Increase button font size to improve readability in action links
himanshupathak95 May 12, 2026
efb7f9f
Remove min-height and padding adjustments for classnames
himanshupathak95 May 12, 2026
4dd937c
Increase font size of search loading indicator for better readability
himanshupathak95 May 12, 2026
417c11c
Enhance filter button styling by adding 'button-compact' class
himanshupathak95 May 12, 2026
dcdb972
Enhance search button styling by adding 'button-compact' class
himanshupathak95 May 12, 2026
d75e772
Remove margin-bottom from button styles for improved layout consistency
himanshupathak95 May 12, 2026
a491804
Add button-compact class to empty trash button
himanshupathak95 May 14, 2026
913ff81
Restore 4px buttons margin
himanshupathak95 May 14, 2026
5214519
Remove hardcoded 32px button styles
himanshupathak95 May 14, 2026
1a3e926
Add button compact class to plugins and themes button
himanshupathak95 May 14, 2026
d65b628
Add button-compact class to theme activation and installation buttons
himanshupathak95 May 19, 2026
4cd7bc9
Change specificity of Media library submit button
himanshupathak95 Jun 15, 2026
34b1f5f
Fix theme preview install button
himanshupathak95 Jun 15, 2026
bc41493
Add back `post-query-submit` id
himanshupathak95 Jun 15, 2026
80da6f9
Remove bottom margin from empty trash button
himanshupathak95 Jun 15, 2026
485fb54
Shift emprty trash CSS from forms to media.css
himanshupathak95 Jun 15, 2026
ccdf27b
Fix search media alignment with filter
himanshupathak95 Jun 15, 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
4 changes: 3 additions & 1 deletion src/wp-admin/css/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1798,9 +1798,10 @@ table.form-table td .updated p {
p.search-box input[type="search"],
p.search-box input[type="text"] {
min-height: 40px;
padding: 0 12px;
}

p.search-box input[type="submit"] {
p.search-box input[type="submit"].button {
margin-bottom: 10px;
}

Expand Down Expand Up @@ -1944,6 +1945,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 @@ -1537,13 +1537,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
19 changes: 18 additions & 1 deletion src/wp-admin/css/media.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,10 @@
.find-box-inside {
bottom: 57px;
}

#delete_all {
margin-bottom: 0;
}
}

@media screen and (max-width: 660px) {
Expand Down Expand Up @@ -1396,7 +1400,6 @@ audio, video {
.wp-filter p.search-box {
float: none;
width: 100%;
margin-bottom: 20px;
display: flex;
flex-wrap: nowrap;
column-gap: 0;
Expand All @@ -1413,6 +1416,20 @@ 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;
}

.wp-filter p.search-box {
margin-bottom: 0;
}
}

@media only screen and (max-width: 600px) {
Expand Down
5 changes: 2 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 thread
himanshupathak95 marked this conversation as resolved.
}

.theme-browser .theme .theme-actions .button.updated-message::before,
Expand Down Expand Up @@ -1968,6 +1965,8 @@ body.full-overlay-active {
.theme-install-overlay .wp-full-overlay-header .button {
float: right;
margin: 7px 10px 0 0; /* Vertically center 32px button in 45px header */
min-height: 32px;
line-height: 2.30769231; /* 30px for 32px height with 13px font */
}

.theme-install-overlay .wp-full-overlay-sidebar {
Expand Down
4 changes: 2 additions & 2 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 @@ -247,7 +247,7 @@ protected function extra_tablenav( $which ) {
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
10 changes: 5 additions & 5 deletions src/wp-admin/theme-install.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,18 +487,18 @@
$aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
?>
<# if ( ! data.active ) { #>
<a class="button button-primary button-compact activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
<a class="button 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 button-compact disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
<button class="button button-primary disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
<# } #>
<# } else { #>
<a class="button button-primary button-compact disabled" ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
<a class="button button-primary disabled" ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
<# } #>
<# } else { #>
<# if ( data.compatible_wp && data.compatible_php ) { #>
<a href="{{ data.install_url }}" class="button button-primary button-compact theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></a>
<a href="{{ data.install_url }}" class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></a>
<# } else { #>
<a class="button button-primary button-compact disabled" ><?php _ex( 'Cannot Install', 'theme' ); ?></a>
<a class="button button-primary disabled" ><?php _ex( 'Cannot Install', 'theme' ); ?></a>
<# } #>
<# } #>
</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