Media buttons separate tabs from post editor in the new post page on small screens

[melchoyce]

When the editor hits the small screen size, the media and attachment buttons can force the html/visual tabs away from the post editor: ​https://cloudup.com/cSgojxIDPrX

I tried to fix it myself but ran into some issues. The buttons and tabs, unfortunately, are listed in the same div. This makes styling them separately very difficult and hacky, relying on floating and/or absolutely positioning. I think the best solution would be to separate the buttons and tabs out into two separate containers, so we can give the button container a 100% max-width on smaller screens, but the php for that is beyond my skill level.

You can find the php in question in /wp-includes/class-wp-editor.php, line 128-143.

[ryelle]

26151.diff​ moves the tabs HTML ($buttons) to below the media buttons, wraps the tabs in a div (to prevent them from stacking), and floats the buttons/tabs so they stay on the same line. When they need to wrap, the tabs stay on one line, with the media button(s) above them.

[azaozz]

In 26315:

Fix the editor switching tabs position on small screens, props ryelle, fixes #26151.