[Bug Report][4.1.1] VOverlay content position is broken

[josephlevarato]

Environment

Vuetify Version: 4.1.1
Vue Version: 3.5.35
OS: macOS 10.15 (current)

Steps to reproduce

1. Create a VOverlay component with a model-value linked to a boolean ref
2. Add anything in the VOverlay component, such as a html tag or another (small) component
3. Trigger the boolean ref so it becomes truthy, and see that the contained item inside the VOverlay is being displayed at the bottom left

Expected Behavior

In the simplest format, the VOverlay content should either display at the top left or in the center (if I understand correctly the "location-strategy" prop)

Actual Behavior

The provided example displays the VProgressCircular component at the bottom left of the viewport

Reproduction Link

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

[J-Sek]

Seems to require location="center" which works since v4.1.

It may feel wrong when defaults change, but does it actually break anything?
The example is a bit too minimal :) I wish to better assess the impact.

[josephlevarato]

@J-Sek location="center" indeed works!

It's still weird because trying some examples, mainly "contained" and "advanced" sections under "props" near the end of the doc also does work, yet they don't need the location property used anywhere, so I'm still confused on how it actually works.

So to summarize: It seems that the Overlay content position is not broken, but things have changed in a way that make my old usage no longer possible. I'm still unsure of what's necessary to make the Overlay align items in the center naturally (without the prop) like in the examples.

edit: The loader at the bottom end of the doc page is broken, though.

[J-Sek]

trying some examples (...) work, yet they don't need the location property

class with align-center justify-center still works

The core issue is that after v4.1.0 content gets top/left. You can simply suppress with CSS, although it would break a ton more places unless scoped to the particular use case.

.v-overlay__content {
    top: unset !important;
    left: unset !important;
}

Could you share a more realistic example that is actually affected?

[josephlevarato]

Ok I've put together something that matches more our actual usage through various projects: here

While location="center" helps, I also had to use content-class in order to have actual flexbox for what's inside. I hope this is enough!

[hieplk97]

The example on the Vuetify website is also broken. The loader should display at the center, but it is on the bottom left.

https://vuetifyjs.com/en/components/overlays/#loader