dialog: handle overflow scrolling

src/lib/Dialog.svelte

@@ -145,7 +145,8 @@
 {#snippet dialog()}
 	<div
 		class={[
-			'fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm',
+			'fixed inset-0 z-50 flex items-center-safe justify-center bg-black/50 backdrop-blur-sm',
+			'overflow-auto p-8',
 			classValue
 		]}
 		transition:fade={{ duration: 150 }}
@@ -165,7 +166,7 @@
 		<div
 			bind:this={dialogContainer}
 			class={[
-				'relative max-h-[85vh] w-[90vw] rounded-xl bg-white p-6 shadow-lg',
+				'relative w-[90vw] rounded-xl bg-white p-6 shadow-lg',
 				size === 'sm' && 'max-w-[450px]',
 				size === 'md' && 'max-w-[650px]',
 				size === 'lg' && 'max-w-[850px]',

src/routes/+page.svelte

@@ -53,6 +53,7 @@
 	let dateInputValue = $state<CalendarDate | undefined>(undefined);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
+	let scrollableDialogOpen = $state(true);
 	let toggleOptions: Option[] = $state([
 		'item one',
 		'item two',
@@ -92,6 +93,7 @@
 		<Link href="https://svelte.dev">Visit Svelte</Link>
 
 		<Button onclick={() => (dialogOpen = true)}>Open Dialog</Button>
+		<Button onclick={() => (scrollableDialogOpen = true)}>Open Scrollable Dialog</Button>
 	</div>
 </div>
 
@@ -459,6 +461,7 @@
 	{/snippet}
 </div>
 
+<!-- Regular Dialog Demo -->
 <Dialog
 	bind:open={dialogOpen}
 	title="Dialog Title"
@@ -482,6 +485,40 @@
 	<p>This is a dialog content area.</p>
 </Dialog>
 
+<!-- Scrollable Dialog Demo -->
+<Dialog bind:open={scrollableDialogOpen} title="Scrollable Dialog" size="sm">
+	<div class="space-y-4">
+		<p>
+			Ullamco nulla sunt laboris esse commodo irure id pariatur est irure eiusmod. Cupidatat Lorem
+			ad deserunt non culpa aliqua qui qui ut reprehenderit minim consequat amet. Qui elit ipsum
+			dolor enim laboris. Exercitation sint esse dolore enim irure veniam esse incididunt fugiat.
+		</p>
+		<p>
+			In elit tempor quis enim id fugiat cillum consectetur minim sint ex. Minim reprehenderit culpa
+			sunt in reprehenderit. Amet in minim in nulla officia fugiat laborum velit dolor laborum
+			deserunt aliqua nostrud.
+		</p>
+		<p>
+			Ad dolor ad nisi est fugiat anim aute amet. Fugiat excepteur proident incididunt anim sunt.
+			Proident quis dolor ea voluptate esse commodo voluptate quis culpa cupidatat excepteur.
+		</p>
+		<p>
+			Cillum ut laboris laboris ea ex ex. Aliquip magna irure eiusmod qui eiusmod. Mollit id et
+			incididunt sint mollit anim cillum reprehenderit exercitation labore incididunt culpa. Officia
+			et ad occaecat quis ipsum. Culpa quis cupidatat reprehenderit reprehenderit incididunt
+			excepteur quis minim. Laboris cupidatat laborum est ipsum esse sint aliqua cillum laborum est
+			cillum dolore cupidatat pariatur. Dolor ipsum cillum enim esse consectetur dolor sunt magna.
+		</p>
+		<p>
+			Eu cillum reprehenderit Lorem duis sunt. Mollit laborum tempor magna dolor ad ipsum do fugiat
+			nisi quis culpa tempor veniam officia. Voluptate irure labore aliqua elit officia nulla dolor.
+			Lorem duis ea ea commodo deserunt minim enim. Excepteur non magna cupidatat ea eiusmod dolore
+			elit dolor veniam cupidatat. Amet voluptate culpa ut ex consequat culpa cillum. Exercitation
+			ex voluptate incididunt laboris qui sint id quis in aliqua excepteur incididunt.
+		</p>
+	</div>
+</Dialog>
+
 <style lang="postcss">
 	@reference '$lib/styles/tailwind.css';