MP6: the media modal is broken in smaller windows

[azaozz]

After the MP6 merge the media modal looks broken when the window height is 600px or less.

[azaozz]

At 601px:

At 600px:

[Joen]

Attached patch with a refactor of the media modal responsive code:

• changed load order so larger breakpoint would be before smaller breakpoint
• changed back some of the responsive code to use absolute positioning rather than floats, to fix some overflow issues
• removed the max-height media query so that desktop browsers can also benefit from the responsive code and not just (by todays standards) small smartphones

[iammattthomas]

In 26219:

Improvements to the media uploader at responsive sizes:

• Change load order so larger breakpoint loads before smaller breakpoint.
• Use absolute positioning rather than floats, to fix some overflow issues.
• Remove the max-height media query so desktop browsers benefit from the responsive styles.
• Reset text inputs to 16px so iOS doesn't force zoom.
• Adjust the position of the close button so it doesn't overlap the Create Gallery link.

See #25977. Props joen.

[iammattthomas]

Thanks, Joen. I've left this ticket open because we've still got some problems when in landscape mode -- if the viewport is sufficiently wider than it is tall, scrolling the list of images becomes very difficult and the Insert button can become hidden. The design of the media uploader could really benefit from a more comprehensive re-think at mobile sizes, but I think a few more tweaks for landscape would make it more usable.

[iammattthomas]

In 26229:

Move media uploader responsive styles from wp-admin.css to media-views.css; clean up duplicated media queries. See #25977.

[Joen]

Replying to iammattthomas:

I've taken a second stab at the queries:

• Merged the 782 and 500 width queries into a single 640px query. For the layout we're trying to create, this appeared to work the best.
• At this breakpoint, the full-bleed modal code that removes the drop shadow goes into effect, adding a fair bit of room and making sure the Insert button is on the screen.
• For only landscape views, the modal tabs (which when responsive are on top) are shown in a single line.

Looks like this in landscape now:

[iammattthomas]

Trac missed my commit of Joen's latest patch in r26250. While the media uploader still has some issues on mobile, I think it's going to take a new design for the uploader to solve some of those problems. At any rate, the issue described in this ticket when the window height is 600px or less has been solved, so I'm marking this as fixed.