docs(VCard): workaround to allow content to overflow, fixes #17593, #17628

[scscgit]

Description

1. Add an upgrade step for v-card to allow a content to overflow the card by adding style="overflow: initial" as per

   • [Bug Report][3.3.3] VOverlay contained is cropped if content is larger than container #17593

   Also document a fix for z-index stacking context behavior by adding style="z-index: initial" as per

   • [Bug Report][3.3.4] Elements that overflow are covered by those under them, even ignoring z-index #17628

2. Create a Content overflow section under v-card documentation with an explanation of the default behavior, and an interactive example of how to disable it using both of these styles.

[johnleider]

I don't think that we need an example for this. Just a mention in the guide with links to the corresponding issues.

[scscgit]

@johnleider Is the text in the guide sufficient as it is, only the example should be removed? Also I don't think these two issues are perfectly representative of this happy-path scenario (one is related to v-overflow and other covers additional cases), it will feel more like a complex workaround that has to be studied instead of being by design. Should I still link both of them?

Personally I feel like the text

v-card doesn't let its content overflow outside the card. It also creates a z-index stacking context, making its content unable to display on top of elements outside v-card even if it defines a higher z-index value

may get misunderstood by beginners, as it mentions two new concepts that require a specific setup to replicate. For example, there is a parallel <v-card> explicitly illustrating the z-index issue, and the scale (or an absolute position) illustrates the overflow use-case.

More importantly, I also intended this example to be a manual test coverage of the current behavior, so that whenever the scenario or workarounds change (due to any breaking change, a bug, or when new edge cases get discovered -- I'm not confident if this is an exhaustive list of all possible overflow issues, and given the different implementation compared to Vuetify 2, there can be other side-effects), it will be updated as a source of truth for any overflow scenarios. But I can't find any better place for this than a guide. I'd prefer at least linking a play.vuetifyjs.com example there instead of a live demo, what do you think?

[scscgit]

Updated PR with a less intrusive play.vuetifyjs.com link example and linked the issues. Please provide a feedback if you see any reason to completely remove the example.

[johnleider]

I'm not sure how the other @vuetifyjs/core-team feel about this but I don't think this belongs in the docs.

[MajesticPotatoe]

would agree with @johnleider. Like he had said initially, just the mention in the upgrade guide with corresponding issue links should suffice.

[scscgit]

Moved both issue links to the upgrade guide and removed the example.

[johnleider]

Suggested change

	By default, `v-card` doesn't let its content overflow outside the card. It also creates a `z-index` stacking context, making its content unable to display on top of elements outside `v-card` even if it defines a higher `z-index` value. If you want to opt-out from this behavior, you can use it like `<v-card style="overflow: initial; z-index: initial">`.
	`v-card` does not allow its content to overflow outside the card by default. It also establishes a z-index stacking context, which prevents its content from displaying on top of elements outside the `v-card`, even when it sets a higher z-index value. To override this default behavior, apply the following usage: `<v-card style="overflow: initial; z-index: initial">`.

[johnleider]

Suggested change

	- Content is no longer allowed to overflow card or use higher `z-index` values to display on top of elements outside the card. To disable this behavior, use `<v-card style="overflow: initial; z-index: initial">` ([#17593](https://github.com/vuetifyjs/vuetify/issues/17593), [#17628](https://github.com/vuetifyjs/vuetify/issues/17628))
	- `v-card` does not allow content to overflow or use higher `z-index` values to display on top of elements outside the it. To disable this behavior, use `<v-card style="overflow: initial; z-index: initial">` ([#17593](https://github.com/vuetifyjs/vuetify/issues/17593), [#17628](https://github.com/vuetifyjs/vuetify/issues/17628))

[scscgit]

"on top of elements outside the it", I assume it'll be "outside it" right?