Buttons output in `extra_tablenav` are too tall

[johnbillion]

The new button and form field styles were introduced in [61645] for #64547.

When a plugin outputs a button in the extra_tablenav method of a custom list table, the button is now too tall. It looks like they need to get the same line-height rule that is applied to .tablenav .actions .button: ​https://github.com/WordPress/wordpress-develop/blob/707fa78322968b590e84b29d0575de65dc785b2c/src/wp-admin/css/forms.css#L549-L553

[johnbillion]

Screenshot

[johnbillion]

Dummy list table plugin

[johnbillion]

I've just noticed from the screenshot that the button doesn't have a background colour either. Is that intentional?

[hbhalodia]

Replying to johnbillion:

The new button and form field styles were introduced in [61645] for #64547.

When a plugin outputs a button in the extra_tablenav method of a custom list table, the button is now too tall. It looks like they need to get the same line-height rule that is applied to .tablenav .actions .button: ​https://github.com/WordPress/wordpress-develop/blob/707fa78322968b590e84b29d0575de65dc785b2c/src/wp-admin/css/forms.css#L549-L553

Hi @johnbillion, I do not think that only line-height css will fix the issue, because the newer button styles have a min-height of 40px, which is the main cause that it looks tall.

While the buttons that are inside tablenav and actions, it have a min-height set to 32px.

Either we need to increase the min-height for tablenav from 32px to 40px or set whatever button inside tablenav set min-height to 32px?

[mukesh27]

In [61645] it use specific selector so for tablenav buttons.

.tablenav .actions .button {
    min-height: 32px;
    line-height: 2.30769231; /* 30px for 32px height with 13px font */
    padding: 0 12px;
}

IMO we should use .wp-core-ui .tablenav .button selector that will fix the issue.

[hbhalodia]

Replying to mukesh27:

In [61645] it use specific selector so for tablenav buttons.

.tablenav .actions .button {
    min-height: 32px;
    line-height: 2.30769231; /* 30px for 32px height with 13px font */
    padding: 0 12px;
}

IMO we should use .wp-core-ui .tablenav .button selector that will fix the issue.

Yes thanks @mukesh27, Since this style effectively adds to all the button that are inside the actions class.

The change to .wp-core-ui .tablenav .button fixes the issue, checked locally because it targets all the buttons that are inside .tablenav.

I will raise a PR to update the same.

Trac ticket: https://core.trac.wordpress.org/ticket/64796

Before (button does not placed inside .actions)	After (button does not placed inside .actions)

## Use of AI Tools

• None

Before	After
:---:	:---:

[abdullah17]

Tested the patch from PR #11224 in a local environment.

Setup:

• WordPress trunk (7.0-beta / latest develop)
• Multisite enabled
• No additional plugins active (clean install)
• Browser: Chrome (Version 145.0.7632.162 (Official Build) (arm64))

Steps to reproduce:

1. Used the provided dummy-list-table.php attachment from the ticket.
2. Added it as a plugin and activated it.
3. Accessed the page via Tools → Dummy List Table.
4. Observed the button output from extra_tablenav() (without .actions wrapper).

Results before patch: ​https://ibb.co/HDDd7g3M

• The "Export" button rendered in the top .tablenav appears slightly misaligned compared to standard admin buttons.

Patch testing: ​https://ibb.co/JjgWwV7g

• Applied the patch manually to src/wp-admin/css/forms.css.
• Rebuilt assets using npm run build.
• Performed a hard refresh to ensure updated CSS is loaded.

Results after patch: ​https://ibb.co/7xdy8Z3k

• The button inside .tablenav (even without .actions wrapper) is styled consistently.
• Height, line-height, and alignment match other core buttons.
• Verified in both top and bottom .tablenav.

Additional checks:

• Tested buttons inside .actions wrapper (control case) — no regression observed.
• Checked other admin screens (Posts list table, Users screen) — no visual regressions observed.

Conclusion:
The patch resolves the inconsistency by ensuring buttons within .tablenav receive consistent styling regardless of markup structure.

Buttons rendered within extra_tablenav are displaying correctly. ✅

Before	After

[r1k0]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11224

Environment

• WordPress: 7.0-beta6-62085-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.8 / Client: mysqlnd 8.2.29)
• Browser: Chrome 146.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.4
• MU Plugins:
  • Dummy List Table
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Ensure you have the Dummy list table plugin is installed and activated.
2. Head over to Tools > Dummy List Table.
3. Observe the size of the button.
4. ✅ Patch is solving the problem.

Expected result

• The button should have a consistent size and not overlap the table below it.

Additional Notes

• None

Screenshots/Screencast with results

Before:

After:

This fixes the specific named issue, but the same issue exists for other input types inserted in extra_tablenav, as well. E.g, adding a select or an input will also have the extra height.

I think the same logic should be used to ensure that other controls used by core in that context get the compact sizing. The select styling right above can be split between sizing characteristics & positioning characteristics.

I'm not sure that core uses an input in extra_tablenav anywhere, and it's more reasonable that extenders would need to style things not used by core, so it may not be necessary to add that.

Hi @joedolson, Thanks for the suggestion. I have updated to add all the input controls that can be used, but as rightly said, core does not uses all of them and its responsibility of extenders to fix the style if breaks at there end.

For now, I have update the PR to use it for all controls.

Thanks,

[joedolson]

Marking for commit; requires 2nd committer sign off first.

[johnbillion]

@joedolson 👍

[joedolson]

In 62115:

Admin: Fix height of controls in extra_tablenav.

Add CSS & update selectors so that controls added in the extra_tablenav region of list tables inherit the compact sizing used by core table nav controls.

Reviewed by johnbillion.
Props johnbillion, hbhalodia, mukesh27, sabernhardt, abdullah17, r1k0, joedolson, nilambar, shailu25.
Fixes #64796.