Filterable Multiselect tag encroaches on filter text when 10 or more selected

[lee-chase]

When selecting 10 or more items the filter tag in the filterable multi-select starts to encroach on the space used by the input.

What package(s) are you using?

• carbon-components
• carbon-components-vue

Detailed description

See carbon-design-system/carbon-components-vue#678

Is this issue related to a specific component?

Filterable MultiSelect component

What did you expect to happen? What happened instead? What would you like to
see changed?

A gap should be maintained between filter tag and input text

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
10.7

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

None

Steps to reproduce the issue

1. View https://www.carbondesignsystem.com/components/dropdown/code
2. Use developer tools to set the number of items selected to 30

Additional information

[jendowns]

Since this is a style thing, it also affects the React library as well.
Looks like for the filterable multiselect, the "selected items" tag is positioned absolutely on top of the filter input.

I have a proposed fix 🤔
Opening a PR shortly...

[Paul-Grogan]

Hi, we're observing this on our multiselect too, so curious if there's been any progress/thinking on it since the PR was rolled back?
Does wkeese's proposal in the PR thread offer a way to address it?
#4760 (comment)