bug(@vtmn/css): `VtmnRating` stars out of the box with many reviews.

[tony3fk]

Describe the bug

Stars of VtmnRating component don't fit in the box when they have a lot of ratings and the mobile is 360px.

Steps to reproduce

On any page with a card carousel, staying in Viewport > 359px Notice that each product carousel review star component is overflowing the box when there are many reviews.

Expected behavior

For example, one solution might be to add a wrapper to the flex container and center it. It could look like this:

Browsers affected

• Chrome
• Firefox
• Edge
• Safari

Version affected

@vtmn/assets": "^1.1.1", @vtmn/css-design-tokens": "^1.1.0", @vtmn/css-tailwind-preset": "^1.1.2", @vtmn/css-utilities": "^1.1.1", @vtmn/icons": "^1.2.1", @vtmn/svelte": "^2.0.1"

[lauthieb]

Thanks @tony3fk for reporting this. @Sabrinavigil @SimonLeclercq @MARIEDELATTRE do you think the proposal of wrapping the number of notes below the rating (centered) could be okay for you? If yes, does this need to be done also on Figma with Auto-Layout? Thanks in advance for your help.

[MARIEDELATTRE]

Hi, for your context you should switch to the compact version of this component which is typically designed for this type of usecase.

[lauthieb]

Thanks @MARIEDELATTRE for your answer to @tony3fk. I close this issue accordingly. Feel free to reopen if you feel that could not be possible or if you have another request. Thank you again.