How to center a v-dialog above the remaining space of the viewport if v-navigation-drawer is permanent

[frederikheld]

Hey everyone,

I have the following code

<script setup>
import { ref } from 'vue'

const dialogIsOpen = ref(true)
</script>

<template>
  <v-app>
    <v-main style="background-color: lightblue; border: 4px solid red;">
      <v-container style="border: 4px solid green;">
        <v-row>
          <v-col>
            <v-card max-width="320" class="mx-auto pa-16">
              Lorem Ipsum dolor sit amet ...
            </v-card>
          </v-col>
        </v-row>
      </v-container>

      <v-dialog v-model="dialogIsOpen">
        <v-card max-width="320" class="mx-auto pa-16">
          Lorem Ipsum dolor sit amet ...
        </v-card>
      </v-dialog>
    </v-main>

    <v-navigation-drawer permanent style="opacity: 0.6;" class="pa-4">
      NavDrawer
    </v-navigation-drawer>
  </v-app>
</template>

I added some styling to visualize the boundaries of each component.

The code produces the following layout

While the v-container is taking up only the remaining space of the viewport (green border) besides the open v-navigation-drawer and thus leads to a aesthetically centered v-card, the v-dialog takes up the whole viewport (red border) and thus centers the v-card above the page which looks odd.

I played around with the margins, the properties of v-dialog and also tried to place the v-navigation-drawer inside v-main but nothing changed the result.

Is there any way to center the dialog above the content part of the viewport?

I'm using Vuetify 3.