fix(VDialog): make form fill parent

[Jesse205]

Description

When VDialog specifies height and is used with a form, the dialog does not display the correct height as expected.

Because this pr makes the form completely populate the parent element, there is no need to #20417

Markup:

<template>
  <v-app>
    <v-container>
      <div class="pa-4 text-center">
        <v-dialog
          v-model="dialog"
          :fullscreen="isFullscreen"
          scrollable
          :width="!isFullscreen ? 600 : undefined"
          :height="!isFullscreen ? 600 : undefined"
          :max-width="!isFullscreen ? 600 : undefined"
          :max-height="!isFullscreen ? 600 : undefined"
        >
          <template v-slot:activator="{ props: activatorProps }">
            <v-btn
              class="text-none font-weight-regular"
              text="Edit Profile"
              variant="tonal"
              v-bind="activatorProps"
            ></v-btn>
          </template>
          <form>
            <v-card>
              <v-card-item>
                <v-card-title style="display: flex">
                  <span>User Profile</span>
                  <v-spacer />
                  <v-btn
                    :icon="
                      isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'
                    "
                    variant="text"
                    @click="isFullscreen = !isFullscreen"
                  ></v-btn>
                </v-card-title>
              </v-card-item>
              <v-card-text>
                <v-row dense>
                  <v-col cols="12" md="4" sm="6">
                    <v-text-field label="First name*" required></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      hint="example of helper text only on focus"
                      label="Middle name"
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      hint="example of persistent helper text"
                      label="Last name*"
                      persistent-hint
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field label="Email*" required></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      label="Password*"
                      type="password"
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      label="Confirm Password*"
                      type="password"
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-select
                      :items="['0-17', '18-29', '30-54', '54+']"
                      label="Age*"
                      required
                    ></v-select>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-autocomplete
                      :items="[
                        'Skiing',
                        'Ice hockey',
                        'Soccer',
                        'Basketball',
                        'Hockey',
                        'Reading',
                        'Writing',
                        'Coding',
                        'Basejump',
                      ]"
                      label="Interests"
                      auto-select-first
                      multiple
                    ></v-autocomplete>
                  </v-col>
                </v-row>

                <small class="text-caption text-medium-emphasis"
                  >*indicates required field</small
                >
              </v-card-text>

              <v-divider></v-divider>

              <v-card-actions>
                <v-spacer></v-spacer>

                <v-btn
                  text="Close"
                  variant="plain"
                  @click="dialog = false"
                ></v-btn>

                <v-btn
                  color="primary"
                  text="Save"
                  variant="tonal"
                  @click="dialog = false"
                ></v-btn>
              </v-card-actions>
            </v-card>
          </form>
        </v-dialog>
      </div>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from "vue";

const dialog = ref(true);
const isFullscreen = ref(false);
</script>