Limit tools on mobile.

WordPress · Oct 12, 2020 · e508a3d · e508a3d
1 parent 200f028
commit e508a3d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -100,10 +100,14 @@ export default function Header( {
 							'Generic label for block inserter button'
 						) }
 					/>
-					<ToolSelector />
-					<UndoButton />
-					<RedoButton />
-					<BlockNavigationDropdown />
+					{ isLargeViewport && (
+						<>
+							<ToolSelector />
+							<UndoButton />
+							<RedoButton />
+							<BlockNavigationDropdown />
+						</>
+					) }
 					{ displayBlockToolbar && (
 						<div className="edit-site-header-toolbar__block-toolbar">
 							<BlockToolbar hideDragHandle />

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -31,8 +31,16 @@ body.is-navigation-sidebar-open {
 
 .edit-site-header__toolbar {
 	display: flex;
-	padding-left: $grid-unit-30;
 	align-items: center;
+	padding-left: $grid-unit-10;
+
+	@include break-small() {
+		padding-left: $grid-unit-30;
+	}
+
+	@include break-wide() {
+		padding-right: $grid-unit-10;
+	}
 
 	.edit-site-header-toolbar__inserter-toggle {
 		margin-right: $grid-unit-10;