Move width calculation to negative margin, switch to width instead of…

… minWidth
WordPress · Dec 20, 2021 · d46ae30 · d46ae30
1 parent 8ed3a03
commit d46ae30
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 7 deletions.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -104,14 +104,10 @@ export default function CustomSelectControl( {
 	const anchorRef = useRef();
 
 	// Calculate Popover width based on the size of the component's container.
-	// The width will be set for the content of the menu, so factor in the
-	// Popover's border to ensure that the menu lines up with the toggle button.
 	const [
 		containerResizeListener,
 		{ width: containerWidth },
 	] = useResizeObserver();
-	const widthMinusBorder =
-		containerWidth >= 2 ? containerWidth - 2 : containerWidth;
 
 	function getDescribedBy() {
 		if ( describedBy ) {
@@ -130,7 +126,7 @@ export default function CustomSelectControl( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 		style: {
-			minWidth: widthMinusBorder,
+			width: containerWidth,
 		},
 	} );
 

diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
@@ -44,10 +44,9 @@
 	outline: none;
 	transition: none;
 	max-height: 400px;
-	min-width: 130px;
 	overflow: auto;
 	padding: 0;
-	margin: 0;
+	margin: 0 -$border-width; // Allow width value to include the Popover border width.
 	z-index: z-index(".components-popover");
 }