Insert into post button runs off the side of the screen on small devices

[ryan]

The insert into post button in the media modal runs off the side of the screen on iPhone 5 and Nexus 5.

4.2-beta4-31998-src

[iseulde]

Introduced in [30813], see #30658.

[voldemortensen]

My question here: Why is .search-form being added to every view? That seems to be what the max-width was targeting in the first blame (at least what I gather from the commit message in r30813). I think a proper fix with focus on getting .search-form added only where it needs to be and moving max-width to a more targeted selector.

[ryan]

​https://make.wordpress.org/flow/2015/04/07/visual-survey-of-insert-into-post-button-for-31908/

[DrewAPicture]

Also looks good in Android ​before and ​after. Moving for commit consideration.

[helen]

Too broad of a change, not good on wider screens with many attachments selected. Will look at this more holistically after #30725, which is making changes in the same vicinity so I'd prefer to avoid a conflict there since it's a more complicated patch.

[DrewAPicture]

We need to make a decision here, punt or fix. I'm fine with punting as this isn't new to 4.2.

[azaozz]

31908.2.patch looks good. The problem comes from both "area containers" having the same class name: media-toolbar, and the same "sub-containers" class names. We need to limit them (max-width) for the "toolbar" above the attachments listing area. There's no need to limit them when used under the attachments listing, where the "Insert into post" button is.

[azaozz]

In 32121:

Fix the media modal Insert into post button on narrow screens by limiting the width of .media-toolbar-primary and .media-toolbar-secondary only inside .attachments-browser (the top toolbar).
Props iseulde, DrewAPicture. Fixes #31908.

[ryan]

Looks good on Nexus 5, iPhone 5, and iPhone 6+.