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

[frederikheld]

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]

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]

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

[frederikheld]

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.

[MatthewAry]

I'd consider this to be a pretty typical issue with anything that has a border applied to it, since the border adds to the dimensions of the element for it's purposes. Ideally, for design purposes, they would be identical in width. This is not really a bug though as nothing here is actually broken.