CustomSelectControlV2: fix popover styles (#62821)

* Set max height and overflow behaviour

* add z-index matching legacy popover

* CHANGELOG

* Remove extra prop, revert to 400px

* Switch to flexbox

* Better z-index comment

---

Co-authored-by: ciampo <[email protected]>
Co-authored-by: mirka <[email protected]>

Author: ciampo

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Internal
 
 -   `CustomSelectControlV2`: add root element wrapper. ([#62803](https://github.com/WordPress/gutenberg/pull/62803))
+-   `CustomSelectControlV2`: fix popover styles. ([#62821](https://github.com/WordPress/gutenberg/pull/62821))
 
 ## 28.2.0 (2024-06-26)
 

packages/components/src/custom-select-control-v2/styles.ts

@@ -105,10 +105,20 @@ export const Select = styled( Ariakit.Select, {
 } );
 
 export const SelectPopover = styled( Ariakit.SelectPopover )`
+	display: flex;
+	flex-direction: column;
+
+	background-color: ${ COLORS.theme.background };
 	border-radius: 2px;
-	background: ${ COLORS.theme.background };
 	border: 1px solid ${ COLORS.theme.foreground };
 
+	/* z-index(".components-popover") */
+	z-index: 1000000;
+
+	max-height: min( var( --popover-available-height, 400px ), 400px );
+	overflow: auto;
+	overscroll-behavior: contain;
+
 	&[data-focus-visible] {
 		outline: none; // outline will be on the trigger, rather than the popover
 	}