UI issue in mobile device on add new theme page

[sumitsingh]

Hi,

UI issue in mobile device on add new theme page. when i am preview theme details then somthing wromg UI with popup width.

siteurl/wp-admin/theme-install.php?browse=new

More information check SS.

[sumitsingh]

UI issue in mobile device on add new theme page

[costdev]

Can reproduce the view shown in the screenshot. This provides an inaccurate preview for the user's screen size and I agree that this should be fixed.

As far as I can see, this has two options:

1. Make the sidebar full-width at max-width: 600px. This makes the theme preview only visible when "Collapse" has been triggered. This is similar to how the Customizer works - at max-width: 600px, the sidebar is full-width and the preview can only be seen once triggering "Preview".
2. Set the width of the theme preview (.theme-install-overlay iframe) to 100vw instead of 100%. This way, the theme preview will remain in proportion to the user's current screen (i.e. a true preview), rather than being limited to the available space when the sidebar is expanded. Triggering the sidebar's "Collapse" will smoothly slide the preview into place.

Milestoning for 6.0 and marking as a good-first-bug.

To save new contributors a little bit of time, the related CSS will be in src/wp-admin/css/themes.css which should be minified to src/wp-admin/css/themes.min.css .

[shreyasikhar26]

patch file to fix the issue

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

[shreyasikhar26]

Screenshot after applying the changes from the patch

[shreyasikhar26]

The contents from the 54764.patch are as per the suggestion of @costdev.
In addition to that, I have added css overflow to the parent of the theme previewer's iframe to view the entire theme preview by scrolling horizontally and vertically on mobile/tablet devices.

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

[shreyasikhar26]

Latest patch file with changes suggested by @costdev

[shreyasikhar26]

Screenshot after applying the changes from the latest patch 54764.2.diff

[costdev]

The "squashed" preview occurs both when viewing the Theme Details .theme-overlay iframe and the Customizer #customize-container iframe.

​PR 2146 changes the width from 100% to 100vw. In doing so, a previously "squashed" preview (based on remaining available container space) becomes a "true" preview (based on the user's viewport width).

As expected, this PR resolves the issue in both locations.

Great work @shreyasikhar26! Marking with commit for final review.

[shreyasikhar26]

Replying to costdev:

The "squashed" preview occurs both when viewing the Theme Details .theme-overlay iframe and the Customizer #customize-container iframe.

​PR 2146 changes the width from 100% to 100vw. In doing so, a previously "squashed" preview (based on remaining available container space) becomes a "true" preview (based on the user's viewport width).

As expected, this PR resolves the issue in both locations.

Great work @shreyasikhar26! Marking with commit for final review.

Thank you for the appreciation.

Can we add css overflow to the parent of iframe (for which the width property is modified in the added patch), as current patch is not allowing to scroll new theme preview horizontally to see the complete content of the theme ?

[shreyasikhar26]

Please let me know if you are able to scroll on your end. @costdev

[SergeyBiryukov]

Replying to shreyasikhar26:

Can we add css overflow to the parent of iframe (for which the width property is modified in the added patch), as current patch is not allowing to scroll new theme preview horizontally to see the complete content of the theme ?

Thanks for the PR! I don't think a horizontal scrollbar is necessary here, as one can simply collapse the sidebar to preview the theme. The way I see it, this ticket is more about the preview being squashed when the sidebar is open, rather than being able to really preview the theme on a small screen with the sidebar open.

Of course, this can always be reconsidered later if someone feels strongly either way.

[SergeyBiryukov]

In 52647:

Themes: Correct the width of theme preview on Add Themes screen.

This ensures that the preview ratio remains accurate for the user's screen size when the sidebar is open.

Follow-up to [19995], [20110], [20133], [20138], [28033].

Props shreyasikhar26, costdev, sumitsingh, SergeyBiryukov.
Fixes #54764.

Thanks for the PR! Merged in https://core.trac.wordpress.org/changeset/52647.

[joyously]

This fix caused other problems. See ​https://meta.trac.wordpress.org/ticket/6376

[SergeyBiryukov]

Replying to joyously:

This fix caused other problems. See ​https://meta.trac.wordpress.org/ticket/6376

Thanks for catching that! Since this ticket was closed on a completed milestone, let's continue in #56097.

[SergeyBiryukov]

In 53663:

Themes: Revert the change of theme preview width on Add Themes screen.

The intention was for the preview ratio to remain accurate for the user's screen size when the sidebar is open, but this appears to have caused unintended side effects to the preview alignment.

Follow-up to [52647].

Props superbthemescom, Presskopp.
Fixes #56097. See #54764.

[SergeyBiryukov]

In 53664:

Themes: Revert the change of theme preview width on Add Themes screen.

The intention was for the preview ratio to remain accurate for the user's screen size when the sidebar is open, but this appears to have caused unintended side effects to the preview alignment.

Follow-up to [52647].

Props superbthemescom, Presskopp.
Merges [53663] to the 6.0 branch.
Fixes #56097. See #54764.

[SergeyBiryukov]

Reopening, as this was reverted in the commits above.

A new patch and more testing is needed to avoid the issues raised in #56097.