Fix issue with unified toolbar not fitting

[jasmussen]

Fixes #10959.

This PR fixes an issue where at certain viewport widths, there wouldn't be room for the unified toolbar between the icons on the left, and the buttons on the right, in the editor bar. It does so by:

• Reducing the padding between toolbar segments
• Introducing a new breakpoint, xlarge (1080px), that allows the toolbar to stay in the editor bar for longer, before it stacks.

Note, it also changes the design a smidgeon. CC @youknowriad for opinions, I know this reverts a decision you made earlier:

The reason being: the edge to edge borders are there to imply regions of the interface. This change makes them more like separators between chunks of content, which I feel speaks better to what it is. CC: @alexislloyd and @karmatosed for thoughts.

But my opinion on this is not STRONG, and I can also trivially change it to this, if that's preferred — in fact it may be necessary due to the UI freeze:

How it looked before:

GIF of the fix:

[tofumatt]

Code-wise it's fine and I, for one, like the new look. 👍 from me. (I think this is possibly fine to sneak in past UI freeze, but that's just me…)

[jasmussen]

Thanks for the review! I will wait for thoughts by Riad and Tammie.

[youknowriad]

I personally still prefer the current version because it's more consistent (toolbar vertically separated segments, inspector horizontally separated panels), that said you have my 👍 to move forward, it's just a personal preference.

We should probably update the fullscreen button though

[ZebulanStanphill]

Personally, I think that full-height dividers should be used between different sets of unrelated controls, such as between the fullscreen button and the controls after it, or between the block navigation button and the block toolbar. The shorter lines should be used for dividing within a group of controls, e.g. the different sections of the block toolbar.

[karmatosed]

I don't think we're there with this iteration but I do think it solves a problem. This makes it a 👍 from me to get it in.

[jasmussen]

I don't think we're there with this iteration but I do think it solves a problem. This makes it a 👍 from me to get it in.

Thanks for looking. But just to be clear, it's trivial for me to make it look like https://user-images.githubusercontent.com/1204802/47419612-dab4d200-d77c-11e8-959e-89c4c371f8d1.png if that makes you more happy. I'm not looking to make anyone unhappy here!

[karmatosed]

Visually for me full height seemed to make sense. I would love other opinions though as I do note there is a danger of not thinking they are connected. I also think this menu is something to iterate on after. I am not unhappy either direction.

[chrisvanpatten]

I actually like the shorter version but almost think it should be even shorter 😁 Right now it almost looks like it's a mistake or a rendering bug. A little shorter and it will be more obvious that it's deliberate.

[jasmussen]

Given these bits of feedback:

• Visually for me full height seemed to make sense.
• I also think this menu is something to iterate on after.
• Right now it almost looks like it's a mistake or a rendering bug.

... and given we're past UI freeze, I'm going to revert to the full-height style and get this in.

It's always okay to revisit, and as Tammie notes, it likely will be.

[jasmussen]

Now it looks like this:

Merging if the checks pass.