diff --git a/resources/js/react/layouts/AuthCardLayout.tsx b/resources/js/react/layouts/AuthCardLayout.tsx
index 9c25cdf..132efc8 100644
--- a/resources/js/react/layouts/AuthCardLayout.tsx
+++ b/resources/js/react/layouts/AuthCardLayout.tsx
@@ -31,7 +31,7 @@ export default function AuthCardLayout({
     const error = page.props.error as string | undefined;
 
     return (
-        <div className="flex h-screen flex-col items-center gap-6">
+        <div className="flex min-h-dvh flex-col items-center gap-6">
             <div className="mt-6">
                 <Head title={title} />
                 <Link href={route('index')} className="mt-6 font-medium">
diff --git a/resources/js/vue/layouts/AuthCardLayout.vue b/resources/js/vue/layouts/AuthCardLayout.vue
index f79470a..8f1d4cf 100644
--- a/resources/js/vue/layouts/AuthCardLayout.vue
+++ b/resources/js/vue/layouts/AuthCardLayout.vue
@@ -21,7 +21,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="flex min-h-screen flex-col items-center gap-6">
+    <div class="flex min-h-dvh flex-col items-center gap-6">
         <div class="mt-6">
             <Head :title="title" />
             <Link :href="route('index')" class="mt-6 font-medium">
