Layout bugs in Media Library header on Mobile

[pento]

On mobile devices, I've noticed a couple of inconsistencies between the list view header and the grid view header.

List view:

• On small screens (<330px, or iPhone 3GS size), the search box leaks outside of the header.

Grid view:

• The dropdowns are much smaller than on the list view
• The search box is much smaller than the list view.

See attached screenshots for examples.

[azaozz]

Ref: https://core.trac.wordpress.org/attachment/ticket/27423/media-library-mobile.png

(this is for the media modal but should probably be the same for the Library too). Note that the Search field is "folded" behind an icon for screens <= 640px.

[helen]

Will look.

[helen]

I don't think it's worth wp-admin.css churn in a point release for this. It's not beautiful but it's not broken, either. Moving to 4.1.

[helen]

#29907 was marked as a duplicate.

[obenland]

Related: #29556.

[kvignos]

Agreed that the first diff in #29556 fixes the search input width in list view.

Attached diff 29495.diff​ fixes the search input width in grid view.

[helen]

In 30740:

Filter bar: Better field display on smaller screens.

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

[johnbillion]

Little bit of breakage: #30658