From 89cc26a37f4dba0b63797039829c3ba0e59ef2b1 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Thu, 9 Aug 2018 09:38:46 +0200
Subject: [PATCH] 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.
---
 packages/components/src/menu-item/style.scss             | 4 ++++
 packages/components/src/popover/style.scss               | 6 +++++-
 packages/editor/src/components/block-switcher/style.scss | 6 ++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index 0f0b4c1356e9b..cadcc513a73c8 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -41,6 +41,9 @@
 		// !important allows icons from plugins to be overriden and given a dark-gray fill
 		fill: $dark-gray-900 !important;
 	}
+
+	// Don't wrap text.
+	white-space: nowrap;
 }
 
 .components-menu-item__shortcut {
@@ -48,4 +51,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..de49340c8476e 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -149,9 +149,13 @@ $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.
+		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;