Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zaviermiller opened this issue Oct 12, 2024 · 1 comment · May be fixed by zaviermiller/vuetify#1 or #20588

Comments

@zaviermiller
Copy link

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 added a commit to zaviermiller/vuetify that referenced this issue Oct 12, 2024
@zaviermiller
Copy link
Author

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

@zaviermiller zaviermiller linked a pull request Oct 17, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant