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;