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.
WordPress · Aug 16, 2018 · 89cc26a · 89cc26a
1 parent c647b05
commit 89cc26a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
@@ -41,11 +41,15 @@
 		// !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 {
 	opacity: 0.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
@@ -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
@@ -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;