Toolbar: Increase the height to 48 pixels for both desktop and mobile

[afercia]

Related: #65091, #65849, #65445.

Historically, the toolbar (the admin bar) height has always been 32 pixels and then adjusted to 46 pixels in the responsive view.

This point was recently discussed in the context of the various changes for the Toolbar in WordPress 7.1 and some contributors from the accessibility team pointed out the 32 pixels height appears to be too small for today's average displays and DPI.

The limited height makes hard adding some good focus style.
Also, themes (for the front end) and plugins (for the admin) are forced to take the variable height in account and provide their own styles for the desktop and responsive view, especially when they used fixed / sticky toolbars.

By increasing the toolbar height and making always the same for both desktop and mobile:

• the CSS would greatly simplified
• there would be more space for additional styling e.g. the focus style
• readability would improve
• work for theme and plugin authors would be greatly simplified
• it is also worth noting thet right now a mobile CSS class is added to the body (and used to style the toolbar) on the PHP side when the device in use is detected to be a mobile device. This is done via the wp_is_mobile() function and this part could be entirely removed.

Backward compatibility

Many themes and plugins are unmaintained and this should be taken into account. Id' be in favor of considering any sort of opt-in mechanism, for example a theme support of any other kind of flag for plugins and themes. This needs to be considered carefully.

[joedolson]

Milestoning for 7.2 as part of an extensive need to update the adminbar.

## Summary

• Sets the admin Toolbar height to a uniform 48px on desktop and responsive views (Trac #65881).
• Updates --wp-admin--admin-bar--height, front-end bump styles, and Twenty Twenty / Twenty Twenty-One offsets that hard-coded 32px/46px.
• Local Playwright checks passed for admin + front (desktop and <782px), including WP logo / My Account dropdown alignment.

## Test plan

• [ ] Log in and confirm Toolbar is 48px in wp-admin and on the front end
• [ ] Confirm front-end content is offset below the Toolbar (no overlap)
• [ ] Resize below 782px: height remains 48px; touch icons remain usable
• [ ] Open WP logo and My Account menus; menus align under the bar
• [ ] Spot-check Twenty Twenty and Twenty Twenty-One sticky/header offsets with the admin bar visible

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

Made with ​Cursor

[dilip2615]

Opened a PR for testing: ​https://github.com/WordPress/wordpress-develop/pull/13234

Sets the toolbar height to 48px on desktop and in responsive views, updates the CSS custom property and bump styles, and adjusts Twenty Twenty and Twenty Twenty-One.

Please review these screenshots

[dilip2615]

Thanks for the update, @joedolson
I will continue testing and take care of any additional changes needed for the 7.2 cycle.

[dilip2615]

One more thing, @joedolson updated the GitHub PR description to remove tooling/attribution noise from the initial draft. Please refer to the current PR description for the summary and test plan:
​https://github.com/WordPress/wordpress-develop/pull/13234