WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#50316 closed defect (bug) (fixed)

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

Reported by: pravinparmar2404 Owned by: SergeyBiryukov
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.3.1
Component: Themes Keywords: has-patch has-screenshots commit
Focuses: ui, css, administration Cc:

Description

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

Attachments (6)

Install Theme page in Activate Button iPad.png (363.1 KB) - added by pravinparmar2404 4 months ago.
Install Theme page in Activate Button iPhone X.png (57.4 KB) - added by pravinparmar2404 4 months ago.
iphone11pro-ios1351-safari.PNG (498.7 KB) - added by Toru 4 months ago.
iphone11pro-ios1351-chrome.PNG (316.7 KB) - added by Toru 4 months ago.
50316.diff (828 bytes) - added by afercia 4 months ago.
50316.png (69.3 KB) - added by afercia 4 months ago.

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
4 months ago

  • Component changed from Administration to Themes

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#3 @afercia
4 months ago

  • Focuses accessibility removed

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.

#4 @Toru
4 months ago

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?

#5 @afercia
4 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.5
  • Version changed from trunk to 5.3.1

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
4 months ago

@afercia
4 months ago

#6 follow-up: @afercia
4 months ago

  • Keywords has-patch has-screenshots commit added; good-first-bug needs-patch removed

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.

#7 in reply to: ↑ 6 @mukesh27
3 months ago

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

#8 @SergeyBiryukov
3 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.