Changeset 62602

Timestamp:

06/30/2026 08:14:22 PM (7 weeks ago)

Author:

joedolson

Message:

Admin Reskin: Fix mobile list table control heights.

On the mobile admin viewport, interactive elements on list table pages had inconsistent heights. Give them a consistent height.

Follow-up to [61645].

Reviewed by joedolson.
Merges [62400] to the 7.0 branch.

Props andrewssanya, sainathpoojary, wildworks.
See #64999.

Location:

branches/7.0

Files:

• . (modified) (1 prop)
• src/wp-admin/css/common.css (modified) (3 diffs)
• src/wp-admin/css/forms.css (modified) (3 diffs)
• src/wp-admin/css/list-tables.css (modified) (3 diffs)
• src/wp-admin/includes/class-wp-comments-list-table.php (modified) (1 diff)
• src/wp-admin/includes/class-wp-links-list-table.php (modified) (1 diff)
• src/wp-admin/includes/class-wp-list-table.php (modified) (2 diffs)
• src/wp-admin/includes/class-wp-media-list-table.php (modified) (1 diff)
• src/wp-admin/includes/class-wp-posts-list-table.php (modified) (1 diff)
• src/wp-admin/includes/class-wp-screen.php (modified) (2 diffs)
• src/wp-admin/includes/media.php (modified) (1 diff)

branches/7.0/src/wp-admin/css/common.css

@@ -1875 +1875 @@
         border-top: none;
         height: auto;
-        min-height: 32px; /* Compact size for header buttons */
         margin-bottom: 0;
         padding: 0 6px 0 16px;
@@ -1881 +1880 @@
         border-radius: 0 0 4px 4px;
         color: #646970;
-        line-height: 2.30769231; /* 30px - matches compact button */
         box-shadow: 0 0 0 transparent;
         transition: box-shadow 0.1s linear;
@@ -4279 +4277 @@
         }
 
+        #screen-meta-links .show-settings:after {
+                line-height: 1.9;
+        }
+
         .wp-filter .search-form input[type="search"] {
                 font-size: 1rem;

branches/7.0/src/wp-admin/css/forms.css

@@ -523 +523 @@
 #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;
 }
 
@@ -1758 +1755 @@
         }
 
+        .wp-core-ui .tablenav input[type="text"],
+        .wp-core-ui .tablenav input[type="password"],
+        .wp-core-ui .tablenav input[type="date"],
+        .wp-core-ui .tablenav input[type="datetime"],
+        .wp-core-ui .tablenav input[type="datetime-local"],
+        .wp-core-ui .tablenav input[type="email"],
+        .wp-core-ui .tablenav input[type="month"],
+        .wp-core-ui .tablenav input[type="number"],
+        .wp-core-ui .tablenav input[type="search"],
+        .wp-core-ui .tablenav input[type="tel"],
+        .wp-core-ui .tablenav input[type="time"],
+        .wp-core-ui .tablenav input[type="url"],
+        .wp-core-ui .tablenav input[type="week"],
+        .wp-core-ui .tablenav select {
+                min-height: 40px;
+        }
+
+        .wp-core-ui .tablenav .button {
+                min-height: 40px;
+                line-height: 2.71428571;
+                padding: 0 14px;
+        }
+
         p.search-box {
                 float: none;
@@ -1774 +1794 @@
                 width: 100%;
                 margin-bottom: 0;
+        }
+
+        p.search-box input[type="search"],
+        p.search-box input[type="text"] {
+                min-height: 40px;
         }
 

branches/7.0/src/wp-admin/css/list-tables.css

@@ -1942 +1942 @@
         .tablenav .tablenav-pages .button,
         .tablenav .tablenav-pages .tablenav-pages-navspan {
-                min-width: 44px;
-                padding: 12px 8px;
+                min-width: 40px;
+                min-height: 40px;
+                padding: 10px 8px;
                 font-size: 18px;
                 line-height: 1;
@@ -1949 +1950 @@
 
         .tablenav-pages .pagination-links .current-page {
-                min-width: 44px;
-                padding: 12px 6px;
+                min-width: 40px;
+                padding: 10px 6px;
                 font-size: 16px;
                 line-height: 1.125;
@@ -2178 +2179 @@
         }
 
+        .inline-edit-row select,
+        .inline-edit-row input:where(:not([type=checkbox],[type=radio],[type=submit],[type=button])) {
+                min-height: 40px;
+        }
+
         .inline-edit-row fieldset input[name=jj],
         .inline-edit-row fieldset input[name=hh],

branches/7.0/src/wp-admin/includes/class-wp-comments-list-table.php

@@ -443 +443 @@
                         if ( ! empty( $output ) && $this->has_items() ) {
                                 echo $output;
-                                submit_button( __( 'Filter' ), '', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
+                                submit_button( __( 'Filter' ), 'button-compact', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
                         }
                 }

branches/7.0/src/wp-admin/includes/class-wp-links-list-table.php

@@ -124 +124 @@
                         wp_dropdown_categories( $dropdown_options );
 
-                        submit_button( __( 'Filter' ), '', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
+                        submit_button( __( 'Filter' ), 'button-compact', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
                         ?>
                 </div>

branches/7.0/src/wp-admin/includes/class-wp-list-table.php

@@ -405 +405 @@
         <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo $text; ?>:</label>
         <input type="search" id="<?php echo esc_attr( $input_id ); ?>" name="s" value="<?php _admin_search_query(); ?>" />
-                <?php submit_button( $text, '', '', false, array( 'id' => 'search-submit' ) ); ?>
+                <?php submit_button( $text, 'button-compact', '', false, array( 'id' => 'search-submit' ) ); ?>
 </p>
                 <?php
@@ -621 +621 @@
                 echo "</select>\n";
 
-                submit_button( __( 'Apply' ), 'action', 'bulk_action', false, array( 'id' => "doaction$two" ) );
+                submit_button( __( 'Apply' ), 'action button-compact', 'bulk_action', false, array( 'id' => "doaction$two" ) );
                 echo "\n";
         }

branches/7.0/src/wp-admin/includes/class-wp-media-list-table.php

@@ -243 +243 @@
                         do_action( 'restrict_manage_posts', $this->screen->post_type, $which );
 
-                        submit_button( __( 'Filter' ), '', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
+                        submit_button( __( 'Filter' ), 'button-compact', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
 
                         if ( $this->is_trash && $this->has_items()

branches/7.0/src/wp-admin/includes/class-wp-posts-list-table.php

@@ -597 +597 @@
                         if ( ! empty( $output ) ) {
                                 echo $output;
-                                submit_button( __( 'Filter' ), '', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
+                                submit_button( __( 'Filter' ), 'button-compact', 'filter_action', false, array( 'id' => 'post-query-submit' ) );
                         }
                 }

branches/7.0/src/wp-admin/includes/class-wp-screen.php

@@ -970 +970 @@
                 <?php if ( $this->show_screen_options() ) : ?>
                         <div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
-                        <button type="button" id="show-settings-link" class="button show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></button>
+                        <button type="button" id="show-settings-link" class="button button-compact show-settings" aria-controls="screen-options-wrap" aria-expanded="false"><?php _e( 'Screen Options' ); ?></button>
                         </div>
                         <?php
@@ -977 +977 @@
                         ?>
                         <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
-                        <button type="button" id="contextual-help-link" class="button show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></button>
+                        <button type="button" id="contextual-help-link" class="button button-compact show-settings" aria-controls="contextual-help-wrap" aria-expanded="false"><?php _e( 'Help' ); ?></button>
                         </div>
                 <?php endif; ?>

branches/7.0/src/wp-admin/includes/media.php

@@ -2905 +2905 @@
                 <?php } ?>
 
-                <?php submit_button( __( 'Filter &#187;' ), '', 'post-query-submit', false ); ?>
+                <?php submit_button( __( 'Filter &#187;' ), 'button-compact', 'post-query-submit', false ); ?>
 
         </div>