Popover: Fix width on expandOnMobile (#42635)

* Popover: Fix width on `expandOnMobile` * Add changelog
WordPress · Jul 22, 2022 · 04802c3 · 04802c3
1 parent 5de7f23
commit 04802c3
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Bug Fix
 
+-   `Popover`, `Dropdown`: Fix width when `expandOnMobile` is enabled ([#42635](https://github.com/WordPress/gutenberg/pull/42635/)).
 -   `CustomSelectControl`: Fix font size and hover/focus style inconsistencies with `SelectControl` ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)).
 -   `AnglePickerControl`: Fix gap between elements in RTL mode ([#42534](https://github.com/WordPress/gutenberg/pull/42534)).
 -   `RangeControl`: clamp initialPosition between min and max values ([#42571](https://github.com/WordPress/gutenberg/pull/42571)).

diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js
@@ -27,6 +27,7 @@ export const _default = () => {
 	const show = boolean( 'Example: Show', true );
 	const children = text( 'children', 'Popover Content' );
 	const animate = boolean( 'animate', false );
+	const expandOnMobile = boolean( 'expandOnMobile', false );
 	const focusOnMount = select(
 		'focusOnMount',
 		{
@@ -41,6 +42,7 @@ export const _default = () => {
 	const props = {
 		animate,
 		children,
+		expandOnMobile,
 		focusOnMount,
 		noArrow,
 		isAlternate,

diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -31,7 +31,7 @@
 		position: static;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
-		min-width: auto;
+		width: auto;
 		border: none;
 		outline: none;
 		border-top: $border-width solid $gray-900;