[Bug Report][3.2.2] the width of cards in timeline are not equal

[zhaolinlau]

Environment

Vuetify Version: 3.2.2
Vue Version: 3.2.47
Browsers: Firefox 112.0
OS: Windows 10

Steps to reproduce

Put cards as timeline item and the width of cards are not equal

Expected Behavior

The width of cards should be equal

Actual Behavior

The width of cards are not equal

Reproduction Link

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

[lioneaglesolutions]

I don't think it's up to v-timeline to set the width of the items - you can do this yourself by add width="100%' to v-timeline-item in your case - example here.

[zhaolinlau]

I don't think it's up to v-timeline to set the width of the items - you can do this yourself by add width="100%' to v-timeline-item in your case - example here.

I did try by adding .w-100 to v-timeline-item but not working at all, thank you anyway

[lioneaglesolutions]

@zhaolinlau did it work using width="100%"?

[zhaolinlau]

@zhaolinlau did it work using width="100%"?

Yep

[KaelWD]

It is inconsistent though, should either remove justify-self: flex-end from the inverted items, or add justify-self: flex-start to the others.

[murphy1312]

You can define the grid column width like the following (ratio here: 3:1:3)

<v-timeline style="grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 3fr)">
 <v-timeline-item class="mx-auto">
 ...

This will keep the timeline centered.