Fix issue with unified toolbar not fitting (WordPress#10990)

* Fix issue with unified toolbar not fitting

Fixes WordPress#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.

* Revert to fullheight separators.

assets/stylesheets/_breakpoints.scss

@@ -5,6 +5,8 @@
 // Most used breakpoints
 $break-huge: 1440px;
 $break-wide: 1280px;
+$break-xlarge: 1080px;
+$break-large: 960px;	// admin sidebar auto folds
 $break-large: 960px;	// admin sidebar auto folds
 $break-medium: 782px;	// adminbar goes big
 $break-small: 600px;

assets/stylesheets/_mixins.scss

@@ -14,6 +14,12 @@
 	}
 }
 
+@mixin break-xlarge() {
+	@media (min-width: #{ ($break-xlarge) }) {
+		@content;
+	}
+}
+
 @mixin break-large() {
 	@media (min-width: #{ ($break-large) }) {
 		@content;

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -50,7 +50,7 @@
 	}
 
 	// Move toolbar into top Editor Bar.
-	@include break-large {
+	@include break-xlarge {
 		padding-left: $grid-size;
 		position: static;
 		left: auto;
@@ -64,11 +64,11 @@
 		}
 
 		.editor-block-toolbar {
-			margin: -9px 0;
+			margin: -($grid-size + $border-width) 0;
 		}
 
 		.editor-block-toolbar .components-toolbar {
-			padding: 9px;
+			padding: ($grid-size + $border-width + $border-width) $grid-size-small ($grid-size + $border-width);
 		}
 	}
 }