Polish header for mobile and more languages

[jasmussen]

Fixes #4231.

This PR enhances the editor-bar for mobile, and has been tested with German on an iPhone 5 screen.

It does a few things to free up space and be smart about the mobile UI:

• It tweaks paddings, margins widths
• It hides the "Preview" and "Publish" buttons when the "Switch to Draft" button is showing — publish is disabled at that point anyway
• It adds an icon for the "Saving" state (CSS animated with a little pulse), and as such we can make the save indicator be icon-only on mobile.

Many further improvements can, and should, be made to the mobile UI. But this addresses the things that are directly broken, and aside from general future mobile polish, I would encourage opening separate tickets for mobile header space issues.

Screenshots:

[youknowriad]

This is looking good, I pushed a small commit to fix the unit tests.

The issue I have with the recent updates to the top is the spacing : The space between the publish button and the cog button in mobile is different.

But it's more visible for me in desktop (which I think is not related to this PR). In that case, the space between "Publish" and "Preview" is too small compared to the space between "Publish" and the "cog" button.

Looks good otherwise.

[youknowriad]

I think we should start using CSS Grids more in our stylesheets to fix all these alignments and spacing issues at the parent level which is less subject to errors and updates.

display: grid;
grid-auto-flow: column;
grid-gap: 5px;
align-content: center;
align-items: center;

[youknowriad]

LGTM 👍

[jasmussen]

But it's more visible for me in desktop (which I think is not related to this PR). In that case, the space between "Publish" and "Preview" is too small compared to the space between "Publish" and the "cog" button.

Yep, that's intentional insofar as I've been trying to free up space to fit the most important buttons in multiple languages. German gets very long.

I think improvement can certainly be made, and I like your grid work, but there's not much space we can use if we need to be able to show both preview and publish in german on an iPhone 5. So for now I think it's worth addressing separately, perhaps as part of #5343.

Thanks for the review, merging (when the tests pass)!

[youknowriad]

Yep, that's intentional insofar as I've been trying to free up space to fit the most important buttons in multiple languages. German gets very long.

I don't care if it's the small spacing we choose between the buttons, I just prefer if it's consistent (just use a smaller grid-gap