From c3211fa992638c695fa52125dc867d6b928dc31c Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Thu, 16 Aug 2018 15:24:57 +0200
Subject: [PATCH] Let the menu grow (#8756)

* Let the menu grow

This PR lets the menu grow to accommodate long text. Already now in Spanish, the "Code Editor" wraps having to fit both the spanish label and keyboard shortcut. As we add more keyboard shortcuts as well as hints, we need to let the menu grow to accommodate that, up to the mobile breakpoint in width.

This PR accomplishes that using auto widths, nowrap whitespace, and a little Nacin' Spacin' thrown in for code cleanup while I was there.

* Add case for mobile

* Try and clarify comment.
---
 packages/components/src/menu-item/style.scss             | 8 ++++++++
 packages/components/src/popover/style.scss               | 8 +++++++-
 packages/editor/src/components/block-switcher/style.scss | 6 ++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index 0f0b4c1356e9b..5ad1bb146b1ff 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -41,6 +41,13 @@
 		// !important allows icons from plugins to be overriden and given a dark-gray fill
 		fill: $dark-gray-900 !important;
 	}
+
+	// Don't wrap text until viewport is beyond the mobile breakpoint.
+	@include break-mobile() {
+		.components-popover:not(.is-mobile) & {
+			white-space: nowrap;
+		}
+	}
 }
 
 .components-menu-item__shortcut {
@@ -48,4 +55,5 @@
 	margin-right: 0;
 	margin-left: auto;
 	align-self: center;
+	padding-left: 8px;
 }
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index c9d3fdecac4b7..73b30ebd4464b 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -149,9 +149,15 @@ $arrow-size: 8px;
 
 	.components-popover:not(.is-mobile) & {
 		position: absolute;
-		min-width: 260px;
 		height: auto;
 		overflow-y: auto;
+
+		// Let the menu scale to fit items.
+		@include break-mobile() {
+			width: auto;
+			min-width: 260px;
+			max-width: $break-mobile;
+		}
 	}
 
 	.components-popover:not(.is-mobile).is-top & {
diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss
index 35fb7c8c96ff8..314c6d0f0bbaf 100644
--- a/packages/editor/src/components/block-switcher/style.scss
+++ b/packages/editor/src/components/block-switcher/style.scss
@@ -30,9 +30,11 @@
 	}
 }
 
-.editor-block-switcher__popover .components-popover__content {
-	width: 300px;
+.components-popover:not(.is-mobile).editor-block-switcher__popover .components-popover__content {
+	min-width: 320px;
+}
 
+.editor-block-switcher__popover .components-popover__content {
 	@include break-medium {
 		position: relative;