Center DocumentBar and improve mobile header (WordPress#59134)

* Don't hide list view, remove viewport padding adjustment

* Fix title displacement when cmd k is hidden

* Add flex-basis, hide center on mobile

* Tweaks for maintaining DocumentBar on mobile

* Make title truncate less

* simplify padding

* don't render global styles icon on mobile

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: huzaifaalmesbah <huzaifaalmesbah@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: bangank36 <bangank36@git.wordpress.org>
Co-authored-by: jordesign <jordesign@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

packages/edit-site/src/components/header-edit-mode/style.scss

@@ -1,5 +1,3 @@
-$header-toolbar-min-width: 335px;
-
 .edit-site-header-edit-mode {
 	height: $header-height;
 	align-items: center;
@@ -16,46 +14,62 @@ $header-toolbar-min-width: 335px;
 		display: flex;
 		border: none;
 		align-items: center;
+		flex-grow: 1;
 		flex-shrink: 2;
-		// We need this to be overflow hidden so the block toolbar can
-		// overflow scroll. If the overflow is visible, flexbox allows
-		// the toolbar to grow outside of the allowed container space.
-		overflow: hidden;
 		// Take up the full height of the header so the border focus
 		// is visible on toolbar buttons.
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
 		@include break-medium() {
+			// Account for the site hub, which is 60x60px.
+			flex-basis: calc(37.5% - 60px);
 			padding-right: 2px;
+			// We need this to be overflow hidden so the block toolbar can
+			// overflow scroll. If the overflow is visible, flexbox allows
+			// the toolbar to grow outside of the allowed container space.
+			overflow: hidden;
 		}
 	}
 
 	.edit-site-header-edit-mode__end {
 		display: flex;
 		justify-content: flex-end;
+		height: 100%;
+		flex-grow: 1;
+		flex-shrink: 1;
+
+		@include break-medium() {
+			flex-basis: 37.5%;
+		}
 	}
 
 	.edit-site-header-edit-mode__center {
-		display: flex;
 		align-items: center;
-		height: 100%;
+		display: flex;
+		flex-basis: 100%;
 		flex-grow: 1;
-		margin: 0 $grid-unit-20;
+		flex-shrink: 2;
+		height: 100%;
 		justify-content: center;
+
 		// 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.
 		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 		min-width: 0;
+
+		@include break-medium() {
+			flex-basis: 25%;
+		}
 	}
 
 }
 
 .edit-site-header-edit-mode__toolbar {
-	display: flex;
 	align-items: center;
-	padding-left: $grid-unit-20;
+	display: flex;
 	gap: $grid-unit-10;
+	padding-left: $grid-unit-20;
 
 	@include break-medium() {
 		padding-left: $grid-unit-50 * 0.5;
@@ -87,12 +101,9 @@ $header-toolbar-min-width: 335px;
 	display: inline-flex;
 	align-items: center;
 	flex-wrap: nowrap;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-10;
-	}
-
+	// Ensure actions do not press against .edit-site-header-edit-mode__center.
+	padding-left: $grid-unit-10;
+	padding-right: $grid-unit-10;
 	gap: $grid-unit-10;
 }
 

packages/editor/src/components/document-bar/style.scss

@@ -10,7 +10,7 @@
 	min-width: 0;
 	background: $gray-100;
 	border-radius: $grid-unit-05;
-	width: min(100%, 450px);
+	width: min(100%, 416px);
 
 	&:hover {
 		background-color: $gray-200;
@@ -47,8 +47,8 @@
 	align-items: center;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
-	@include break-small() {
-		padding-left: $grid-unit-40;
+	@include break-medium() {
+		padding-left: $grid-unit-30;
 	}
 
 	.editor-document-bar.is-global & {
@@ -64,14 +64,14 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 50%;
+		max-width: 70%;
 		color: currentColor;
 	}
 }
 
 .editor-document-bar__shortcut {
 	color: $gray-800;
-	min-width: $grid-unit-40;
+	min-width: $grid-unit-30;
 	display: none;
 
 	@include break-medium() {

packages/editor/src/components/document-tools/style.scss

@@ -3,10 +3,11 @@
 	align-items: center;
 
 	// Hide all action buttons except the inserter on mobile.
-	.editor-document-tools__left > .components-button {
+	.editor-document-tools__left > .editor-history__redo,
+	.editor-document-tools__left > .editor-history__undo {
 		display: none;
 
-		@include break-small() {
+		@include break-medium() {
 			display: inline-flex;
 		}
 	}
@@ -70,14 +71,6 @@
 	// Some plugins add buttons here despite best practices.
 	// Push them a bit rightwards to fit the top toolbar.
 	margin-right: $grid-unit-10;
-
-	@include break-medium() {
-		padding-left: $grid-unit-50 * 0.5;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
 }
 
 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {

packages/interface/src/components/pinned-items/style.scss

@@ -10,8 +10,7 @@
 		&[aria-controls="edit-post:document"],
 		&[aria-controls="edit-post:block"],
 		&[aria-controls="edit-site:template"],
-		&[aria-controls="edit-site:block-inspector"],
-		&[aria-controls="edit-site:global-styles"] {
+		&[aria-controls="edit-site:block-inspector"] {
 			display: flex;
 		}