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

Closed
himanshupathak95 wants to merge 23 commits into from
Closed

Admin: Standardize mobile viewport heights for interactive elements #11750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
0a1f989
Forms: increase ht to 40px
himanshupathak95 May 7, 2026
554b43e
Add plugin: Increase min-height of form and dropdown to 40px
himanshupathak95 May 7, 2026
cf1393f
Media library: Increase min-ht to 40px
himanshupathak95 May 7, 2026
e51af49
Enhance select mode toggle button styling by adding 'button-compact' …
himanshupathak95 May 12, 2026
cd6de21
Increase button font size to improve readability in action links
himanshupathak95 May 12, 2026
f0e08fe
Remove min-height and padding adjustments for classnames
himanshupathak95 May 12, 2026
65957a6
Increase font size of search loading indicator for better readability
himanshupathak95 May 12, 2026
9fe4d01
Enhance filter button styling by adding 'button-compact' class
himanshupathak95 May 12, 2026
46356cb
Enhance search button styling by adding 'button-compact' class
himanshupathak95 May 12, 2026
841b50a
Remove margin-bottom from button styles for improved layout consistency
himanshupathak95 May 12, 2026
e82e252
Add button-compact class to empty trash button
himanshupathak95 May 14, 2026
f18d32e
Restore 4px buttons margin
himanshupathak95 May 14, 2026
3c727fe
Remove hardcoded 32px button styles
himanshupathak95 May 14, 2026
d5e58c6
Add button compact class to plugins and themes button
himanshupathak95 May 14, 2026
b5bcd3f
Add button-compact class to theme activation and installation buttons
himanshupathak95 May 19, 2026
d684815
Change specificity of Media library submit button
himanshupathak95 Jun 15, 2026
5f8a6d1
Fix theme preview install button
himanshupathak95 Jun 15, 2026
2250a6d
Add back `post-query-submit` id
himanshupathak95 Jun 15, 2026
fc3c199
Remove bottom margin from empty trash button
himanshupathak95 Jun 15, 2026
21f43a2
Shift emprty trash CSS from forms to media.css
himanshupathak95 Jun 15, 2026
343db19
Fix search media alignment with filter
himanshupathak95 Jun 15, 2026
719f9f5
Restore the .button-compact class that was removed in 34b1f5f
himanshupathak95 Jun 17, 2026
b6bbf96
Add `button-compact` class to the buttons that are automatically regi…
himanshupathak95 Jun 17, 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
34 changes: 17 additions & 17 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-primary button-compact 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-primary button-compact 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-primary button-compact 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-primary button-compact 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-primary button-compact 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 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
Loading
Loading