Multiselection combobox not showing properly on small devices

[Eboru]

Describe the bug

Multiselection combobox overflow on small screen, making it difficult to use since arrow is not shown.
This is because clr-combobox-wrapper.multi min-width is set to 18rem

How to reproduce

https://stackblitz.com/edit/clarity-dark-theme-clr12-cds5-vltppw?file=src%2Fapp%2Fapp.component.html
There's a fix on app.component.css

Steps to reproduce the behavior:

1. Create a stepper
2. Create a multiselection combo box
3. Set a small viewport (example iPhoneSE 475x667)

Expected behavior

Multiselection combobox should not overflow

Versions

Clarity version:

• v12.x
• [ X] v13.x
• Other:

Framework:

• [ X] Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Device:

• Browser [Brave/Chrome]

Additional notes

I write here the fix again
::ng-deep clr-combobox div.clr-combobox-wrapper.multi.clr-anchor {
min-width: unset !important;
}

By default

Where the problem lies

My solution, not sure if it is the best one i'm not used to css neither ui design

Hope this is usefull, it's my first bug report.

[Jinnie]

@Eboru thanks for the detailed research.
The problem, if I get it correctly, is that the wrapped input gets cut on the right side and the dropdown caret is not visible anymore.
We do need to have some minimal width there, which is the 18rem, but not if the viewport is smaller.
I think a good fix would be:

min-width: min(18rem, 100%);

Needs to be tested though.

[github-actions]

🎉 This issue has been resolved in version 12.1.3 🎉

The release is available on:

• GitHub release
• v12.1.3

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 13.4.0 🎉

The release is available on:

• GitHub release
• v13.4.0

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.