From 841747fdef4ace6f7544e0e027878c4582c2aab3 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 9 Jun 2017 10:25:27 +0200
Subject: [PATCH 1/5] Fix issue where post settings overlapped floated images
 in mobile.

---
 editor/assets/stylesheets/_z-index.scss | 1 +
 editor/sidebar/style.scss               | 1 +
 2 files changed, 2 insertions(+)

diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
index 951d8c582082d..792479b6a1558 100644
--- a/editor/assets/stylesheets/_z-index.scss
+++ b/editor/assets/stylesheets/_z-index.scss
@@ -7,6 +7,7 @@ $z-layers: (
 	'.editor-visual-editor__block {core/image aligned left or right}': 10,
 	'.editor-visual-editor__block-controls': 1,
 	'.components-form-toggle__input': 1,
+	'.editor-sidebar': 19,
 	'.editor-header': 20,
 	'.editor-post-visibility__dialog': 30,
 	'.editor-post-schedule__dialog': 30,
diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
index e18e504bfb39e..bd1137fd7783f 100644
--- a/editor/sidebar/style.scss
+++ b/editor/sidebar/style.scss
@@ -1,5 +1,6 @@
 .editor-sidebar {
 	position: fixed;
+	z-index: z-index( '.editor-sidebar' );
 	right: 0;
 	top: $admin-bar-height-big + $header-height;
 	bottom: 0;

From 49c34b7390a2c4db5c84729d1b7c377c5cd43098 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 9 Jun 2017 10:54:06 +0200
Subject: [PATCH 2/5] Initial stab at modal inserter on mobile.

---
 editor/inserter/style.scss | 39 +++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
index 03db7ed9f7351..b1a2b995f2400 100644
--- a/editor/inserter/style.scss
+++ b/editor/inserter/style.scss
@@ -1,6 +1,5 @@
 .editor-inserter {
 	display: inline-block;
-	position: relative;
 	background: none;
 	border: none;
 	padding: 0;
@@ -8,6 +7,10 @@
 	font-size: $default-font-size;
 	line-height: $default-line-height;
 	z-index: z-index( '.editor-inserter' );
+
+	@include break-medium {
+		position: relative;
+	}
 }
 
 .editor-inserter__toggle {
@@ -31,13 +34,23 @@
 }
 
 .editor-inserter__menu {
-	width: 280px;
 	box-shadow: $shadow-popover;
 	border: 1px solid $light-gray-500;
 	position: absolute;
-	left: -122px;
 	background: $white;
 
+	left: 0;
+	right: 0;
+	//height: calc( 100vh - #{ $admin-bar-height-big + $header-height } );
+
+	// inserter becomes popup
+	@include break-medium {
+		width: 280px;
+		left: -122px;
+		right: auto;
+		height: auto;
+	}
+
 	&.is-top {
 		bottom: 42px;
 
@@ -66,7 +79,11 @@
 	}
 
 	&.is-bottom {
-		top: 42px;
+		top: $admin-bar-height-big + $item-spacing -1px;
+
+		@include break-medium {
+			top: $admin-bar-height + $item-spacing;
+		}
 
 		.editor-inserter__arrow {
 			top: -10px;
@@ -110,10 +127,22 @@
 	position: absolute;
 	width: 0;
 	z-index: z-index( '.editor-inserter__arrow' );
+
+	display: none;
+
+	@include break-medium {
+		display: block;
+	}
 }
 
 .editor-inserter__content {
-	max-height: 50vh;
+	height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size } );
+
+	@include break-medium {
+		height: auto;
+		max-height: 50vh;
+	}
+
 	overflow: auto;
 	box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 );
 

From 8c1147cc4cf9940dbf13d55eaf5dedbfea72da0c Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 9 Jun 2017 10:57:00 +0200
Subject: [PATCH 3/5] Improve mode switcher on mobile.

---
 editor/header/mode-switcher/style.scss | 6 ++++++
 editor/inserter/style.scss             | 1 -
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
index 349db6582b47a..0305f26b196a0 100644
--- a/editor/header/mode-switcher/style.scss
+++ b/editor/header/mode-switcher/style.scss
@@ -33,6 +33,12 @@
 		z-index: z-index( '.editor-mode-switcher .dashicon' );
 		margin-left: -24px;
 		margin-top: -1px;
+
+		display: none;
+
+		@include break-small {
+			display: block;
+		}
 	}
 
 	&:hover,
diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
index b1a2b995f2400..ad4153811e41d 100644
--- a/editor/inserter/style.scss
+++ b/editor/inserter/style.scss
@@ -41,7 +41,6 @@
 
 	left: 0;
 	right: 0;
-	//height: calc( 100vh - #{ $admin-bar-height-big + $header-height } );
 
 	// inserter becomes popup
 	@include break-medium {

From 6991910962d60afb48ff52d611850c0b17a637cd Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 9 Jun 2017 11:30:26 +0200
Subject: [PATCH 4/5] Improve modal sidebar on mobile.

This fixes scroll bleed when post settings is open on mobile. It also fixes the vertical position of it.

The downside here is that you lose your place in the editor when you open modal. This is similar behavior to WordPress.com, and it's an improvement on the old editor where you'd have to scroll to the metaboxes below the editor regardless. But it might be worth looking into fixing this with JS down the road.
---
 editor/sidebar/style.scss | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
index bd1137fd7783f..95177a20f6231 100644
--- a/editor/sidebar/style.scss
+++ b/editor/sidebar/style.scss
@@ -1,5 +1,5 @@
 .editor-sidebar {
-	position: fixed;
+	position: sticky;
 	z-index: z-index( '.editor-sidebar' );
 	right: 0;
 	top: $admin-bar-height-big + $header-height;
@@ -8,6 +8,10 @@
 	border-left: 1px solid $light-gray-500;
 	background: $light-gray-300;
 
+	@include break-small() {
+		position: fixed;
+	}
+
 	@include break-medium() {
 		top: $admin-bar-height + $header-height;
 	}
@@ -28,7 +32,27 @@
 
 /* Visual and Text editor both */
 .editor-layout.is-sidebar-opened .editor-layout__content {
-	margin-right: $sidebar-width;
+	margin-left: -200%;
+    float: left;
+	height: 0;
+
+	@include break-small() {
+		margin-left: auto;
+		float: none;
+		height: auto;
+	}
+
+	@include break-medium() {
+		margin-right: $sidebar-width;
+	}
+}
+
+.editor-layout.is-sidebar-opened {
+	overflow: hidden;
+
+	@include break-small() {
+		overflow: auto;
+	}
 }
 
 .editor-layout.is-sidebar-opened .editor-sidebar {

From 4ee47a2397cec61653eaeaccea634bf2f11bfba1 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 9 Jun 2017 13:02:20 +0200
Subject: [PATCH 5/5] Fix tabs/spaces.

---
 editor/sidebar/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
index 95177a20f6231..977670368728f 100644
--- a/editor/sidebar/style.scss
+++ b/editor/sidebar/style.scss
@@ -33,7 +33,7 @@
 /* Visual and Text editor both */
 .editor-layout.is-sidebar-opened .editor-layout__content {
 	margin-left: -200%;
-    float: left;
+	float: left;
 	height: 0;
 
 	@include break-small() {