From 9162e4c66e7ac2dedf2820801e64944c7b9e8b82 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Tue, 27 Feb 2018 18:46:15 +0000
Subject: [PATCH] Fixed a series of z-index related issues, that made other
 elements appear in front of the sidebar on mobile. (#5165)

---
 edit-post/assets/stylesheets/_z-index.scss | 6 +++++-
 edit-post/components/sidebar/style.scss    | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 55caded5d1981..4700de8f57b29 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -25,6 +25,7 @@ $z-layers: (
 	'.editor-block-mover': 1,
 	'.blocks-gallery-item__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 20, // Below the header
+	'.blocks-url-input__suggestions': 30,
 	'.edit-post-header': 30,
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
 
@@ -37,6 +38,10 @@ $z-layers: (
 	'.edit-post-sidebar': 100000,
 	'.edit-post-layout .edit-post-post-publish-panel': 100001,
 
+	// Show sidebar in greater than small viewports above editor related elements
+	// but bellow #adminmenuback { z-index: 100 }
+	'.edit-post-sidebar {greater than small}': 50,
+
 	// Show notices below expanded wp-admin submenus:
 	// #adminmenuwrap { z-index: 9990 }
 	'.components-notice-list': 9989,
@@ -45,7 +50,6 @@ $z-layers: (
 	// #adminmenuwrap { z-index: 9990 }
 	'.components-popover': 1000000,
 	'.components-autocomplete__results': 1000000,
-	'.blocks-url-input__suggestions': 9999,
 );
 
 @function z-index( $key ) {
diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss
index 8c85fd91d5ef3..de3cdf07f29db 100644
--- a/edit-post/components/sidebar/style.scss
+++ b/edit-post/components/sidebar/style.scss
@@ -13,7 +13,7 @@
 
 	@include break-small() {
 		top: $admin-bar-height-big + $header-height;
-		z-index: auto;
+		z-index: z-index( '.edit-post-sidebar {greater than small}' );
 		height: auto;
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;