Theme Install Page : Theme activate button not showing properly in a small device

[pravinparmar2404]

When we check in a small device like (Mobile and iPad) in the theme install page in Theme Activate Button not showing properly.

[afercia]

This ticket was discussed during today's accessibility bug-scrub. The team agreed this isn't an accessibility issue as the button is fully operable. More a visual glitch that should be fixed in the CSS. Removing the accessibility focus accordingly.

[Toru]

I checked with iPhone 11 Pro, iOS 13.5.1, with latest Chrome and Safari. But I could not recreate the issue reported.

I think the captures you attached are desktop Chrome's responsive mode, which is an emulator and can display slightly differently than the real devices. Would you be able to check with real devices?

[afercia]

Worth noting this happens in the Add Themes page (wp-admin/theme-install.php), not in the Customizer. I can reproduce the issue starting from WordPress 5.3.1.

After the changes of the buttons and form controls CSS in WordPress 5.3 and 5.3.1, the buttons now have a bigger height in the responsive view. The new CSS is also better standardized and removed several "exceptions".

Unfortunately, this specific button lives in a "sticky" bar with a fixed height. Also, the button uses some CSS that is an "exception" to the default buttons style and doesn't fit with the changes from WP 5.3.

Ideally, there shouldn't be exceptions. However, the Theme Installer top bar doesn't have a sufficient height to allow for the button height in the responsive view, which is now 40 pixels. It's a very similar case to the Customizer, which also has a fixed height top bar. These bars aren't responsive at all.

Unfortunately, over the years, neither the Theme Installer and the Customizer fully addressed a solid implementation of a responsive view, togeher with other pars of the admin UI. To avoid a larger refactoring, I'd lean towards making this button not responsive as well, much like the similar button in the Customizer.

[afercia]

50316.diff​ makes the button have always the same height also in the responsive view, much like the similar button in the Customizer. See screenshot above.

Regarding the removed line-height close to the inline comment /* For when .theme-install is a span rather than a.button-primary (already installed theme) */, that is no longer used since WordPress 4.6.

[mukesh27]

50316.diff​ patch working fine for me in WordPress 5.5-alpha-47923 version

[SergeyBiryukov]

In 48143:

Themes: Ensure the Activate button in theme preview overlay on Add Themes screen has a consistent height.

Props afercia, pravinparmar2404, Toru, mukesh27.
Fixes #50316.