From 45ebe4b3d399277115ba9d0b9e044918089e3e3d Mon Sep 17 00:00:00 2001
From: Joen A <>
Date: Tue, 7 Jul 2020 11:01:11 +0200
Subject: [PATCH] Movers: Add bigger mobile touch targets.

This increases the size of the mover control touch targets to 48x48.
---
 .../src/components/block-mover/style.scss     | 56 +++++++++++--------
 .../components/src/toolbar-group/style.scss   |  2 +-
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index cd575144d7958..44b55cfb62455 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -15,8 +15,14 @@
 .block-editor-block-mover {
 	.components-toolbar-group,
 	.components-toolbar {
-		flex-direction: column;
 		flex: 1;
+
+		// Increase touch targets on mobile.
+		flex-direction: row;
+
+		@include break-small() {
+			flex-direction: column;
+		}
 	}
 
 	&.is-horizontal .components-toolbar-group,
@@ -25,9 +31,10 @@
 	}
 
 	.block-editor-block-mover-button {
-		height: $block-toolbar-height/2;
-		width: $block-toolbar-height;
-		padding: 0 !important;
+		@include break-small() {
+			padding: 0 !important;
+			height: $block-toolbar-height/2;
+		}
 
 		// Focus style.
 		// Overrides .components-toolbar-group styles
@@ -38,29 +45,31 @@
 	}
 
 	// Position the icons correctly.
-	.components-toolbar-group .block-editor-block-mover-button.is-up-button,
-	.components-toolbar .block-editor-block-mover-button.is-up-button {
-		svg {
-			margin-bottom: -$grid-unit-10;
-		}
+	@include break-small() {
+		.components-toolbar-group .block-editor-block-mover-button.is-up-button,
+		.components-toolbar .block-editor-block-mover-button.is-up-button {
+			svg {
+				margin-bottom: -$grid-unit-10;
+			}
 
-		// Focus style.
-		&::before {
-			bottom: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			// Focus style.
+			&::before {
+				bottom: 0;
+				height: calc(100% - #{ $grid-unit-10 });
+			}
 		}
-	}
 
-	.components-toolbar-group .block-editor-block-mover-button.is-down-button,
-	.components-toolbar .block-editor-block-mover-button.is-down-button {
-		svg {
-			margin-top: -$grid-unit-10;
-		}
+		.components-toolbar-group .block-editor-block-mover-button.is-down-button,
+		.components-toolbar .block-editor-block-mover-button.is-down-button {
+			svg {
+				margin-top: -$grid-unit-10;
+			}
 
-		// Focus style.
-		&::before {
-			top: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			// Focus style.
+			&::before {
+				top: 0;
+				height: calc(100% - #{ $grid-unit-10 });
+			}
 		}
 	}
 
@@ -70,7 +79,6 @@
 			height: $block-toolbar-height;
 			// Overrides .components-toolbar-group styles
 			width: $block-toolbar-height / 2;
-			min-width: $grid-unit-30;
 			padding-left: 0;
 			padding-right: 0;
 
diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
index 2bab095e5a47d..08a3141f6b288 100644
--- a/packages/components/src/toolbar-group/style.scss
+++ b/packages/components/src/toolbar-group/style.scss
@@ -92,7 +92,7 @@ div.components-toolbar {
 }
 
 // Last button in a group.
-.components-accessible-toolbar .components-toolbar-group > .components-button:last-child.has-icon,
+.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon,
 .components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon,
 .components-toolbar div:last-child .components-button.has-icon {
 	min-width: $block-toolbar-height - $grid-unit-15 / 2;