[Bug Report] Incorrect positioning for v-card-actions in v-dialog

[joffff]

Environment

Vuetify Version: 2.2.12
Vue Version: 2.6.11
Browsers: Firefox 74.0
OS: Windows 10

Steps to reproduce

Create a v-btn element within v-card-actions in a v-card that's embedded in a v-dialog.

Expected Behavior

v-card-actions should be positioned as far from the left as the v-card-title when used in a v-dialog.

Actual Behavior

v-card-actions are positioned more to the left than the v-card-title when used in a v-dialog.

Reproduction Link

https://codepen.io/joffff/pen/1c3b45bf93102229c3ddc558d88be971

Other comments

A similar bug for v-card-subtile was reported in #9468.

[joffff]

I'd be interested in resolving this myself as a first issue, if someone is available to walk me through the process?

[jblachly]

@joffff
I ran in to this today and was able to fix it within the scope of my component. It'd be great if you are able to fix it in Vuetify. I do not know Sass, how to compile it, nor how to test it, but I can tell you how I fixed it locally and likely how you could fix for Vuetify. Details below.

Custom CSS in your component will fix this:

<style scoped>
.v-dialog > .v-card > .v-card__actions {
    padding: 8px 16px;
}
</style>

I am enough a Vue novice myself to not yet understand whether removing "scoped" will help fix this problem for your entire site / all components. Probably yes?

Anyway, if you can find where vuetify defines .v-dialog > .v-card > .v-card__title (and also .v-card__text), you can simply add the .v-card__actions and create a pull request.

returning 5 minutes later
OK although I don't speak Sass it looks simple enough:

vuetify/packages/vuetify/src/components/VDialog/VDialog.sass

Lines 20 to 31 in 088a509

	> .v-card
	> .v-card__title
	font-size: $dialog-card-title-font-size
	font-weight: $dialog-card-title-font-weight
	letter-spacing: $dialog-card-title-letter-spacing
	padding: $dialog-card-title-padding
	> .v-card__text
	padding: $dialog-card-text-padding
	> .v-card__subtitle
	padding: $dialog-card-subtitle-padding

Simply add the .v-card__actions with an appropriate Sass variable, then define the variable here:

vuetify/packages/vuetify/src/components/VDialog/_variables.scss

Lines 1 to 12 in 088a509

	@import '../../styles/styles.sass';
	$dialog-border-radius: $border-radius-root !default;
	$dialog-card-subtitle-padding: 0 24px 20px !default;
	$dialog-card-text-padding: 0 24px 20px !default;
	$dialog-card-title-font-size: map-deep-get($headings, 'h6', 'size') !default;
	$dialog-card-title-font-weight: map-deep-get($headings, 'h6', 'weight') !default;
	$dialog-card-title-letter-spacing: map-deep-get($headings, 'h6', 'letter-spacing') !default;
	$dialog-card-title-padding: 16px 24px 10px !default;
	$dialog-elevation: 24 !default;
	$dialog-margin: 24px !default;
	$dialog-max-height: 90% !default;

I suggest 8px 16px