Dialog with full width button

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
</script>

<template>
  <div class="flex items-center justify-center">
    <Dialog>
      <DialogTrigger as-child>
        <Button variant="outline">Session Expired</Button>
      </DialogTrigger>
      <DialogContent :show-close-button="false">
        <DialogHeader>
          <DialogTitle>Session Expired</DialogTitle>
          <DialogDescription>
            Your session has timed out due to inactivity. Please sign in again to continue where you left off.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button class="w-full">Sign In Again</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</template>