fix(VCard): Incorrect positioning for v-card-actions in v-dialog

[NabeelAhmed314]

fixes #10605

Incorrect positioning for v-card-actions when v-card is used in v-dialog is fixed by changing the default padding for v-card-actions to get it into correct position.

Description

Changed default padding for v-card-actions in variables file in order to make it correctly positioned .
fixes #10605

Motivation and Context

In order to start phase # 1 of Vuetify Titan all bugs with vcard had to be resolved.
Resolves Following Issue.
#10605

How Has This Been Tested?

This has been tested visually.

Markup:

<template>
  <v-container>
    <v-dialog v-model="showDialog">
      <v-card>
        <v-card-title>This is positioned correctly</v-card-title>
        <v-card-subtitle>This is positioned too far to the left</v-card-subtitle>
        <v-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in ipsum purus. Vestibulum non diam ultricies, scelerisque ex vel, commodo sem. Phasellus blandit vehicula arcu, in dignissim magna. Nullam et augue sit amet eros dictum feugiat. Nam mi lorem, interdum non elementum vitae, sollicitudin nec mi. Phasellus facilisis enim sit amet porttitor dictum. Sed molestie ex vitae augue convallis blandit. Nulla a dapibus tortor, eu accumsan urna. Fusce varius turpis sed justo pellentesque pulvinar. Morbi eu leo nec ipsum elementum ullamcorper. Pellentesque at urna risus. Aliquam consequat id velit et elementum.
        </v-card-text>
        <v-card-actions>
          <v-btn>Click Me</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-card>
      <v-card-title>This is positioned correctly</v-card-title>
      <v-card-subtitle>This is positioned too far to the left</v-card-subtitle>
      <v-card-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in ipsum purus. Vestibulum non diam ultricies, scelerisque ex vel, commodo sem. Phasellus blandit vehicula arcu, in dignissim magna. Nullam et augue sit amet eros dictum feugiat. Nam mi lorem, interdum non elementum vitae, sollicitudin nec mi. Phasellus facilisis enim sit amet porttitor dictum. Sed molestie ex vitae augue convallis blandit. Nulla a dapibus tortor, eu accumsan urna. Fusce varius turpis sed justo pellentesque pulvinar. Morbi eu leo nec ipsum elementum ullamcorper. Pellentesque at urna risus. Aliquam consequat id velit et elementum.
      </v-card-text>
      <v-card-actions>
        <v-btn>Click Me</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      showDialog: () => true,
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[MajesticPotatoe]

This causes issues with cards outside of dialogs (they receive to much padding).

8px 24px works fine inside the dialog, outside the dialog it would need to be 8px 16px.
would suggest changing this to 8px 16px and then applying 24px to VDialog sass/vars

[NabeelAhmed314]

@MajesticPotatoe I have added the changes you have requested. Kindly review these changes.