Some parts of the layout break with longer translations

[afercia]

The UI should take into account longer translations and, in some cases, also custom post types that could have long names.

At this point of the project, the UI should be thoroughly tested in as many different languages as possible. I've quickly switched through a few languages and noticed some layout issues. Some of them are minor, other ones are a bit more serious.

Especially flexbox seems not appropriate in some cases: while it's handy to have correct alignments, it doesn't allow elements to wrap as necessary, unless flex-wrap is used properly.

A few examples:

The View Post and Copy Link buttons in the publishing flow: when a post has a long name, the second button is partially cut-off:

Same happens in some languages with existing custom post types that have long names: this is Jetpack Testimonials in Italian:

In other parts of the UI I've noticed minor issues: the UI can still be used but it's not so nice to see:

Image size in German:

Text size in German:

I wonder what might happen in the mobile view, and when plugins will start adding their buttons on the toolbar and in other parts of the UI. Generally, I'd tend to think that the usage of flexbox in these problematic cases should be reviewed to gracefully allow elements to wrap when necessary.

[mtias]

@sarahmonster when you have some time, could you look at the publish panel one? The fonts is no longer relevant after #9802.

[sarahmonster]

This should be solved longer-term by the changes planned in #9398, but since that's a wee bit stalled I've put together a quick PR in #10514 to ensure these buttons can't ever get pushed off-screen.