From 4b772819a41fca4a5b86f2923f4e10dbd817c823 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Thu, 25 Oct 2018 09:45:37 +0200
Subject: [PATCH] Fix issue with unified toolbar not fitting (#10990)

* Fix issue with unified toolbar not fitting

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.

* Revert to fullheight separators.
---
 assets/stylesheets/_breakpoints.scss                        | 2 ++
 assets/stylesheets/_mixins.scss                             | 6 ++++++
 .../src/components/header/header-toolbar/style.scss         | 6 +++---
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/assets/stylesheets/_breakpoints.scss b/assets/stylesheets/_breakpoints.scss
index 57ec965a73eca..020b945b1d5e9 100644
--- a/assets/stylesheets/_breakpoints.scss
+++ b/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;
diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index 9e14930dad1c4..3cbfe6b3a0441 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/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;
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 526ffed155968..02410b24407a5 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/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);
 		}
 	}
 }