[wp-trac] [WordPress Trac] #54764: UI issue in mobile device on add new theme page

[WordPress Trac]

#54764: UI issue in mobile device on add new theme page
-------------------------------------------------+-------------------------
 Reporter:  sumitsingh                           |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  6.0
Component:  General                              |     Version:  5.8.2
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots needs-patch good-    |     Focuses:  ui, css
  first-bug                                      |
-------------------------------------------------+-------------------------
Changes (by costdev):

 * keywords:   => has-screenshots needs-patch good-first-bug
 * focuses:   => ui, css
 * milestone:  Awaiting Review => 6.0


Comment:

 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 `.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54764#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform