Wrap selected items in experimental select control (woocommerce#38284)

Neosate · May 16, 2023 · 5b50bbc · 5b50bbc
1 parent 8dc16fa
commit 5b50bbc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/js/components/changelog/fix-38210 b/packages/js/components/changelog/fix-38210
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Wrap selected items in experimental select control
diff --git a/packages/js/components/src/experimental-select-control/combo-box.scss b/packages/js/components/src/experimental-select-control/combo-box.scss
@@ -18,7 +18,6 @@
 .woocommerce-experimental-select-control__items-wrapper {
 	display: flex;
 	flex-grow: 1;
-	flex-wrap: wrap;
 	align-items: center;
 	padding: 2px $gap-smaller;
 

diff --git a/packages/js/components/src/experimental-select-control/selected-items.scss b/packages/js/components/src/experimental-select-control/selected-items.scss
@@ -1,7 +1,11 @@
-.woocommerce-experimental-select-control__selected-items.is-read-only {
-    font-size: 13px;
-    color: $gray-900;
-    font-family: var(--wp--preset--font-family--system-font);
+.woocommerce-experimental-select-control__selected-items {
+    flex-wrap: wrap;
+
+    &.is-read-only {
+        font-size: 13px;
+        color: $gray-900;
+        font-family: var(--wp--preset--font-family--system-font);
+    }
 }
 
 .woocommerce-experimental-select-control__selected-item {