Add flex-basis, hide center on mobile

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

@@ -16,7 +16,12 @@ $header-toolbar-min-width: 335px;
 		display: flex;
 		border: none;
 		align-items: center;
+		flex-grow: 1;
 		flex-shrink: 2;
+
+		// Account for the site hub, with is 60x60px.
+		flex-basis: calc(37.5% - 60px);
+
 		// 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.
@@ -33,20 +38,31 @@ $header-toolbar-min-width: 335px;
 	.edit-site-header-edit-mode__end {
 		display: flex;
 		justify-content: flex-end;
+		height: 100%;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 37.5%;
 	}
 
 	.edit-site-header-edit-mode__center {
-		display: flex;
+		display: none;
 		align-items: center;
 		height: 100%;
-		flex-grow: 1;
-		margin: 0 $grid-unit-20;
+		margin: 0 $grid-unit-10;
 		justify-content: center;
+		flex-grow: 1;
+		flex-shrink: 2;
+		flex-basis: 25%;
+
 		// 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-small() {
+			display: flex;
+		}
 	}
 
 }