From 5af7925eda4815c10a0279b5ebfba4f71e7c39e1 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 24 Oct 2018 11:02:20 +0200
Subject: [PATCH 1/2] 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.
---
 assets/stylesheets/_breakpoints.scss                  |  2 ++
 assets/stylesheets/_mixins.scss                       |  6 ++++++
 .../src/components/header/header-toolbar/style.scss   | 11 ++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/assets/stylesheets/_breakpoints.scss b/assets/stylesheets/_breakpoints.scss
index 57ec965a73eca2..020b945b1d5e92 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 9e14930dad1c49..3cbfe6b3a04414 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 526ffed155968e..5c6836d035aae4 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,16 @@
 		}
 
 		.editor-block-toolbar {
-			margin: -9px 0;
+			margin: 0;
 		}
 
 		.editor-block-toolbar .components-toolbar {
-			padding: 9px;
+			padding: 0 $grid-size-small;
+		}
+
+		// Hide the right border on the ellipsis menu.
+		.editor-block-toolbar > div:last-child .components-toolbar {
+			border-right: none;
 		}
 	}
 }

From 39937d659ab838baf1dff0bbfdefda31a06fe2ca Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Thu, 25 Oct 2018 09:28:14 +0200
Subject: [PATCH 2/2] Revert to fullheight separators.

---
 .../src/components/header/header-toolbar/style.scss      | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

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 5c6836d035aae4..02410b24407a54 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -64,16 +64,11 @@
 		}
 
 		.editor-block-toolbar {
-			margin: 0;
+			margin: -($grid-size + $border-width) 0;
 		}
 
 		.editor-block-toolbar .components-toolbar {
-			padding: 0 $grid-size-small;
-		}
-
-		// Hide the right border on the ellipsis menu.
-		.editor-block-toolbar > div:last-child .components-toolbar {
-			border-right: none;
+			padding: ($grid-size + $border-width + $border-width) $grid-size-small ($grid-size + $border-width);
 		}
 	}
 }