vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Bug Report][3.7.2] Badge over avatar in list item prepend slot causes inconsistent spacing

Open zaviermiller opened this issue 1 year ago • 1 comments

Environment

Vuetify Version: 3.7.2 Vue Version: 3.5.12 Browsers: Chrome 129.0.0.0 OS: Linux x86_64

Steps to reproduce

  1. Create a v-list
  2. Create two v-list-items inside the list
  3. Inside each item, put a simple v-avatar in the list item prepend slot, and give each one a title (it can be with the component or the prop)
  4. Wrap one of the avatars with a v-badge component

Expected Behavior

The spacing between the avatar and the title is consistent for both list items

Actual Behavior

The list item with the badge around the avatar will have more spacing between the avatar and title than the other list item.

Reproduction Link

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

zaviermiller avatar Oct 12 '24 20:10 zaviermiller

This issue also affects slim list items and the append slot. I've taken a stab at fixing this issue here: https://github.com/zaviermiller/vuetify/pull/1/files

zaviermiller avatar Oct 12 '24 20:10 zaviermiller