Add New links at the top of some pages become huge on smaller screens

[Luan Ramos]

When I access some tabs in WordPress, the buttons at the top appear very large. This "giant" appearance is significantly breaking the layout.

[Luan Ramos]

When I access some tabs in WordPress, the buttons at the top appear very large. This "giant" appearance is significantly breaking the layout.

[joedolson]

Related to #40331. Not technically a change in button style, but inheriting the standard button sizing in smaller view ports looks strange in this context.

[sabernhardt]

Add New Theme link with search form below it, in WordPress 6.6

[sabernhardt]

I think the link's height looked more broken before #40331 and WordPress 6.6, so I reclassified this as an enhancement.

[26134] mentions size adjustments "for better touch usability." The current 52.15 pixels tall is a bit larger than necessary, though the recommended minimum is 44. The .page-title-action links could add a line-height of 1.57142857 on narrower screens for exactly 44 pixels tall.

Alternatively, the common button-style links are 40 pixels tall, which would match the height for search fields and similar elements below the page title. For consistency with both of those, the .page-title-action links could add the padding, line-height and min-height found in .wp-core-ui .button styles. (The line-height is high, but that should be fine because the text does not wrap.)

@media screen and (max-width: 782px) {
  .wp-core-ui .button {
    padding: 0 14px;
    line-height: 2.71428571;
    min-height: 40px;
  }
}