Theme screenshots get blurry at various breakpoints

[shaunandrews]

With the new installed theme page, screenshots can get a little too large and look fuzzy, especially on retina displays. At larger screen sizes, the grid should adapt to add more columns and force a max-width on the detail view screenshot. Each breakpoint should also ensure that it doesn't let screenshots in the grid get "too large."

[shaunandrews]

26172.diff updates a few media queries and adds a few new ones to ensure that screenshots never get larger than 450px wide.

[iammattthomas]

I'm afraid 26172.diff doesn't apply cleanly now that theme.css has been merged into wp-admin.css. Since this also makes some changes to media query breakpoints and I'm not exactly sure what the finished product is supposed to look like, I think it'd be best to make a new patch rather than me try to merge bits by hand.

[shaunandrews]

Replying to iammattthomas:

I'm afraid 26172.diff doesn't apply cleanly now that theme.css has been merged into wp-admin.css. Since this also makes some changes to media query breakpoints and I'm not exactly sure what the finished product is supposed to look like, I think it'd be best to make a new patch rather than me try to merge bits by hand.

Ugh. Ok. Working on refreshing the patch now.

[shaunandrews]

26172.2.diff​ refreshes the previous diff to work with the now merged theme styles in wp-admin.css.

[iammattthomas]

In 26633:

Add more columns in the theme browser on screens over 2000px wide to ensure that theme screenshots never appear larger than their resolution allows. Fixes #26172, props shaunandrews.

[matveb]

We are missing the max-width check for the detailed view. Let's set that 880px which gives us a nice round height number at 4:3 — 660px.

[nacin]

In 26730:

Themes: Set a max-width on screenshots so they don't get blurry at very wide screen widths.

props matveb.
fixes #26172.