From 591e55e861ba5fed4be72f0e14b3da7bdc5a8678 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 26 Oct 2017 10:11:19 +0100
Subject: [PATCH] Polish Editor and Toolbar position in the different
 breakpoints

---
 editor/assets/stylesheets/main.scss   | 23 +++++++++++++----------
 editor/header/style.scss              | 24 +++++++++++++++++-------
 editor/layout/style.scss              |  5 -----
 editor/modes/visual-editor/style.scss | 10 +---------
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss
index 9eaac45c8b8059..bf980881ddcb1a 100644
--- a/editor/assets/stylesheets/main.scss
+++ b/editor/assets/stylesheets/main.scss
@@ -4,24 +4,24 @@ body.gutenberg-editor-page {
 	#update-nag, .update-nag {
 		display: none;
 	}
-	
+
 	#wpcontent {
 		padding-left: 0;
 	}
-	
+
 	#wpbody-content {
 		padding-bottom: 0;
 	}
-	
+
 	#wpfooter {
 		display: none;
 	}
-	
+
 	.a11y-speak-region {
 		left: -1px;
 		top: -1px;
 	}
-	
+
 	svg {
 		fill: currentColor;
 	}
@@ -54,12 +54,19 @@ body.gutenberg-editor-page {
 
 .gutenberg__editor {
 	position: relative;
-	height: calc( 100vh - #{ $admin-bar-height-big } );
+	height: calc( 100vh - #{ $admin-bar-height-big} );
+	padding-top: $header-height + $stacked-toolbar-height;
 
+	// The WP header height changes at this breakpoint
 	@include break-medium {
 		height: calc( 100vh - #{ $admin-bar-height } );
 	}
 
+	// The block toolbar disappears at this breakpoint
+	@include break-large {
+		padding-top: $header-height;
+	}
+
 	img {
 		max-width: 100%;
 	}
@@ -67,10 +74,6 @@ body.gutenberg-editor-page {
 	iframe {
 		width: 100%;
 	}
-
-	@include break-small() {
-		padding-top: $header-height;
-	}
 }
 
 .editor-post-title,
diff --git a/editor/header/style.scss b/editor/header/style.scss
index 3162a8f1918f72..7c0e16ed368338 100644
--- a/editor/header/style.scss
+++ b/editor/header/style.scss
@@ -11,13 +11,8 @@
 	left: 0;
 	right: 0;
 
-	top: 0;
-	position: sticky;
-
-	@include break-small() {
-		top: $admin-bar-height-big;
-		position: fixed;
-	}
+	top: $admin-bar-height-big;
+	position: fixed;
 
 	@include break-medium() {
 		top: $admin-bar-height;
@@ -139,6 +134,17 @@
 	border-bottom: 1px solid $light-gray-500;
 	min-height: $stacked-toolbar-height;
 
+	.is-sidebar-opened & {
+		display: none;
+	}
+
+	@include break-medium {
+		.is-sidebar-opened & {
+			display: block;
+			right: $sidebar-width;
+		}
+	}
+
 	// merge toolbars after this breakpoint
 	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
 		padding-left: $item-spacing;
@@ -148,5 +154,9 @@
 		background: none;
 		border-bottom: none;
 		min-height: auto;
+
+		.is-sidebar-opened & {
+			right: auto;
+		}
 	}
 }
diff --git a/editor/layout/style.scss b/editor/layout/style.scss
index e9bd55965acc1f..c2eaba24fdceae 100644
--- a/editor/layout/style.scss
+++ b/editor/layout/style.scss
@@ -10,11 +10,6 @@
 .editor-layout__content {
 	display: flex;
 	flex-direction: column;
-	margin-top: #{ -1 * $header-height };
-
-	@include break-medium {
-		margin-top: 0;
-	}
 }
 
 .editor-layout__editor {
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 500485d1449269..4ed2c6a7cd27f7 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -2,7 +2,7 @@
 	position: relative;
 	height: 100%;
 	margin: 0 auto;
-	padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0;
+	padding: 50px 0 0;
 
 	&,
 	& p {
@@ -10,14 +10,6 @@
 		font-size: $editor-font-size;
 		line-height: $editor-line-height;
 	}
-
-	@include break-small() {
-		padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0;
-	}
-
-	@include break-large() {
-		padding: 60px 0;
-	}
 }
 
 .editor-visual-editor {