diff --git a/packages/js/components/changelog/fix-38210 b/packages/js/components/changelog/fix-38210 new file mode 100644 index 00000000000..26520bd3a91 --- /dev/null +++ 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 index 7faddd52a83..acb2426f6dc 100644 --- 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 index e9565582172..424bb40b9b9 100644 --- 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 {