feat: Hide keyboard shortcuts on mobile screens (WordPress#9051)

* feat: Hide keyboard shortcuts on mobile screens Fix WordPress#9050. * docs: Clarify reasoning for wanting more space * Add min-width to menu. This fixes a regression I introduced in https://github.com/WordPress/gutenberg/pull/8756/files#diff-dcb8eefee4aaf82c9ddb042494547527R158.
uxview · Aug 16, 2018 · 2399173 · 2399173
1 parent 3b9d23f
commit 2399173
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
@@ -51,9 +51,17 @@
 }
 
 .components-menu-item__shortcut {
+	align-self: center;
 	opacity: 0.5;
 	margin-right: 0;
 	margin-left: auto;
-	align-self: center;
 	padding-left: 8px;
+
+	// Hide the keyboard shortcuts on mobile, because they aren't super-useful
+	// for most mobile users and it frees up screen space for any item
+	// with a long description.
+	display: none;
+	@include break-mobile() {
+		display: inline;
+	}
 }
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -153,9 +153,9 @@ $arrow-size: 8px;
 		overflow-y: auto;
 
 		// Let the menu scale to fit items.
+		min-width: 260px;
 		@include break-mobile() {
 			width: auto;
-			min-width: 260px;
 			max-width: $break-mobile;
 		}
 	}