Site Editor: fix app header on small-medium screens (#27310)

Especially in contexts with the navigation sidebar open Fixes #27245 #26754
WordPress · Nov 27, 2020 · 2370863 · 2370863
1 parent 33d0366
commit 2370863
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 37 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -57,7 +57,6 @@ $mobile-header-toolbar-height: 44px;
 $mobile-floating-toolbar-height: 44px;
 $mobile-floating-toolbar-margin: 8px;
 $mobile-color-swatch: 48px;
-$header-toolbar-min-width: 335px;
 
 /**
  * Shadows.

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -5,39 +5,27 @@
 	height: $header-height;
 	box-sizing: border-box;
 	width: 100%;
+	justify-content: space-between;
 
 	@include break-medium() {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
+		body.is-fullscreen-mode & {
+			padding-left: 60px;
+			transition: padding-left 20ms linear;
+			transition-delay: 80ms;
+			@include reduce-motion("transition");
+		}
+
 	}
 
 	.edit-site-header_start,
 	.edit-site-header_end {
-		flex: 1 0;
 		display: flex;
 	}
 
-	@include break-medium() {
-		.edit-site-header_start {
-			// Flex basis prevents the header_start toolbar
-			// from collapsing when shrinking the viewport.
-			flex-basis: calc(#{$header-toolbar-min-width} - #{$header-height});
-		}
-
-		.edit-site-header_end {
-			// Flex basis prevents the header_end toolbar
-			// from collapsing when shrinking the viewport
-			flex-basis: $header-toolbar-min-width;
-		}
-	}
-
 	.edit-site-header_center {
 		display: flex;
 		align-items: center;
 		height: 100%;
-		flex-shrink: 1;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
 		// subsequently truncate child text, we set an explicit min-width.
@@ -56,20 +44,14 @@ body.is-navigation-sidebar-open {
 		padding-left: 0;
 		transition: padding-left 20ms linear;
 		transition-delay: 0ms;
-
-		.edit-site-header_start {
-			flex-basis: $header-toolbar-min-width;
-		}
 	}
 }
 
 // Centred document title on small screens with sidebar open
-@media ( max-width: #{ ($break-medium - 1) } ) {
+@media ( max-width: #{ ($break-large - 1) } ) {
 	body.is-navigation-sidebar-open .edit-site-header {
-		.edit-site-header_start {
-			flex-basis: 0;
-		}
-		.block-editor-post-preview__button-toggle {
+		.edit-site-header-toolbar__inserter-toggle ~ .components-button,
+		.edit-site-header_end .components-button:not(.is-primary) {
 			display: none;
 		}
 		.edit-site-save-button__button {

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -1,15 +1,19 @@
 .edit-site-navigation-toggle {
+	align-items: center;
+	background: $gray-900;
+	border-radius: 0;
 	display: none;
+	position: absolute;
+	z-index: z-index(".edit-site-navigation-toggle");
+	height: $header-height + $border-width; // Cover header border
+	width: $header-height;
 
 	@include break-medium() {
-		align-items: center;
-		background: $gray-900;
-		border-radius: 0;
 		display: flex;
-		position: absolute;
-		z-index: z-index(".edit-site-navigation-toggle");
-		height: $header-height + $border-width; // Cover header border
-		width: $header-height;
+	}
+
+	body.is-navigation-sidebar-open & {
+		display: flex;
 	}
 }