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

@@ -41,11 +41,19 @@
 		// !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 {
 	opacity: 0.5;
 	margin-right: 0;
 	margin-left: auto;
 	align-self: center;
+	padding-left: 8px;
 }

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 & {

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;