Layout bugs in "Add New" Theme section

[jesin]

1. On 320px wide screens the search bar overflows and the menu above it (15, Features, Popular...) doesn't look neat.

2. Under the Feature Filter section the Features division is at 33% width.

3. The theme popup (that appears when a theme is clicked) has a large Install button on screens lesser than 768px.

Patch fixes the search bar by creating a new media query section for 320px and the Feature Filter.

[obenland]

Filters on large screen

[obenland]

29556.2.diff​:

• removes the theme count on small screens (>320px).
• Reverts some of the crazy of r28037
• Gives all columns an equal width. On large screens the boxes still have two columns.
• Readjusts the alignment of the install button on small screens.

A review by someone with experience writing CSS for the whole admin would be appreciated, as I'm sure I didn't catch all uses of the CSS I changed.

[obenland]

Also reported on ​make/flow.

[helen]

That filter bar CSS is used in the media library and plugin install, if somebody would like to check. I don't believe the drawer part is used anywhere else right now, though.

[obenland]

Tested 29556.3.diff​ with media library, theme install, and plugin install. Helen, would you mind double-checking it?

This would also fix the short search bar, reported in #29495.

[obenland]

#30027 was marked as a duplicate.

[SergeyBiryukov]

In 29959:

Theme install:

• Move the "based on" string below the rating to avoid wrapping to a second line.
• Reduce the gap between the theme screenshot and description.
• Fix Install button height on mobile.

props obenland, ocean90.
fixes #28148. see #29556.

[TacoVerdo]

Made a minor change to 29556.3.diff​, as it would still have the search bar overflow (issue 1) with screensizes just over 320px.

I also tested 29556.4.diff​ in media library, theme install, and plugin install.

[helen]

TacoVerdo - can you make a new patch for the issues you saw? This one isn't applying.

[jesin]

Patch 29556.5.diff​ refreshes TacoVerdo's 29556.4.diff​. Patch has not been tested.

[helen]

In 30740:

Filter bar: Better field display on smaller screens.

props TacoVerdo, jesin.
fixes #29556 and #29495.

[pavelevap]

Chrome, monitor 1920 x 1080 px, search box broken in current trunk...

[jesin]

Replying to pavelevap:

Chrome, monitor 1920 x 1080 px, search box broken in current trunk...

It happens on smaller resolutions too. Patch 29556.6.diff​ removes .wp-filter-search's max-width, reverts width to 280px and sets a max-width for screens smaller than 650px.

[pavelevap]

Patch works well for me. There is another small issue, bubble with number of themes is a little stripped from the top and bottom. I am not sure, if it is expected beahaviour.

[azaozz]

In 30747:

Themes screen: fix the position of the search field. Props jesin, fixes #29556.