Polish mobile, notably iPhone

[jasmussen]

This is sort of a kitchen sink PR of small fixes. It:

• Polishes the inserter tabs so the focus style isn't clippsed
• Tweaks margins in the toolbar on mobile, so things aren't shifted around
• It undoes that individually scrolling content area and makes the body scroll. More on this in a second.
• It polishes how the fixed-to-block toolbar looks on mobile
• It changs how the fixed position toolbars behave, making them sticky, otherwise it wouldn't work with the WP admin bar properly
• It rotates the ellipsis button that shows mobile tools so it matches the top ellipsis. This needs more work separately, with the idea of instead showing these tools when the block is selected.
• It prevents Mobile Safari from zooming the entire page when you open the inserter (it does this because the textfield receives focus, and Mobile Safari deems the 13px font too small, so it zooms)

As such, the above fixes part of the issues described in #4077, notably the zooming and scrolling issues.

How Has This Been Tested?

Tested in Chrome simulator, as well as the Xcode iPhone 8 simulator.

Screenshots

Here's a video showing the iOS simulator:

https://cloudup.com/ccvLjdy6cT3

Outside of the iOS changes, which make Gutenberg usable, I'm going to open a separate ticket about modal improvements (some work to be done there). But because these changes also affect the desktop breakpoints, we should be sure to test this PR fairly widely.

[karmatosed]

This is great. It does need really thorough testing though. It's important as fixes some of the experience issues 'right now' and we can then iterate.

[aduth]

Is this targeting iOS specifically? Does it impact larger-display iOS like iPads? Is the -webkit-overflow-scrolling style unnecessary if we're intending to exclude it?

[jasmussen]

I'm essentially normalizing the scrolling behavior across the mobile breakpoint, yes. And though the iPad also suffers from the same scrolling issue, the larger screen real estate makes the scroll issue less annoying, so it'd be good to keep the property there.

[youknowriad]

Nice work, I have some remarks:

• You removed the margins around the block mobile toolbar, should we do the same for the "permalink toolbar" when you focus the title?

• A small glitch, I think related to the fact that you changed how to fix the block toolbar: I expect the editor's top padding/margin to stay the same if the same toolbars are shown. But there's a difference in one of the breakpoints. Take a look at the gif and see how the editor's content jumps when resizing the window.

[jasmussen]

Great great catches, Riad. I believe I fixed them now:

[jasmussen]

Going to merge in a bit unless you have last minute objections, Riad?

Thanks.