AlertDialog leaves the viewport in mobile mode

[wsw70]

I started to write a simple wrapper for full-screen messages, based on AlertDialog or Dialog:

<template>
  <AlertDialog v-model:open="open">
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogDescription>
          <slot></slot>
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>OK</AlertDialogCancel>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { ref } from 'vue';

const open = ref(false)
</script>

When calling it from the parent as

<PopupCard>This is the content</PopupCard>

it leaves the viewport in mobile mode:

I need ti scroll to get the image above, it behaves as if the size of the sceen was my whole monitor. In other words, in "desktp" mode it works fine: a darkened background with a nice card in the middle of the monitor.

Is there something I should do for AlertDialog (or Dialog) to adapt to the viewport?