diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 19eb2e973..c8c58de81 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -20,7 +20,7 @@
 		/>
 		<AlertDialog.Content
 			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none md:w-full"
+			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none sm:max-w-lg md:w-full"
 		>
 			<div class="flex flex-col gap-4 pb-6">
 				<AlertDialog.Title class="text-lg font-semibold tracking-tight"
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index 6ba8f27d1..0b2452ddd 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -21,7 +21,7 @@
 		/>
 		<Dialog.Content
 			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[490px] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none md:w-full"
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none sm:max-w-[490px] md:w-full"
 		>
 			<Dialog.Title
 				class="flex w-full items-center justify-center text-lg font-semibold tracking-tight"