search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.86k stars 6.97k forks source link

[Bug Report][3.6.6] VChip has different width for 'flat' and 'outlined' variants #19836

Open frederikheld opened 5 months ago

frederikheld commented 5 months ago

Environment

Vuetify Version: 3.6.6 Vue Version: 3.4.27 Browsers: Firefox 126.0 OS: Ubuntu undefined

Steps to reproduce

In my case: use the v-chip as toggle-item that shows the two states as flat and outlined variants. You will see how the width changes which can sometimes unexpectedly wrap the line if multiple chips are displayed inline.

Expected Behavior

Chip should have same width regardless of variant.

Actual Behavior

Chip changes width depending on variant

Reproduction Link

https://play.vuetifyjs.com/#...

frederikheld commented 5 months ago

I was able to "fix" this by conditionally adding a span around the v-chip text that has a margin left and right of 0.085em each. But I don't know if this is the right unit to keep it consistent and if this solution would work in other contexts as well.

mirocklez commented 5 months ago

The same applies for the button, as well - the outlined variant increases the width by 2px.

frederikheld commented 5 months ago

Okay, well. It's just too obvious that the border would be a pixel value XD I replaced 0.085em with 1px on each side and can confirm the fix.