From dcbf990808f38058ebce8cc9015fdfde367ada95 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 22 Aug 2026 09:55:00 +0200
Subject: [PATCH] feat(ui): make base dialog responsive and support sticky
 headers

---
 tools/ui/src/lib/components/ui/dialog/dialog-close.svelte   | 6 ++++++
 tools/ui/src/lib/components/ui/dialog/dialog-content.svelte | 3 ++-
 tools/ui/src/lib/components/ui/dialog/dialog-header.svelte  | 5 ++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/tools/ui/src/lib/components/ui/dialog/dialog-close.svelte b/tools/ui/src/lib/components/ui/dialog/dialog-close.svelte
index e8a96a7731..cd957a9bf8 100644
--- a/tools/ui/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/tools/ui/src/lib/components/ui/dialog/dialog-close.svelte
@@ -5,3 +5,9 @@
 </script>
 
 <DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
+
+<style>
+	:global([data-dialog-close]) {
+		z-index: 999;
+	}
+</style>
diff --git a/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte b/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte
index e6b2a641d5..6657f5735c 100644
--- a/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte
@@ -25,7 +25,8 @@
 	<DialogPrimitive.Content
 		bind:ref
 		class={cn(
-			`fixed top-[50%] left-[50%] z-50 grid max-h-[100dvh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-lg border border-border/30 bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg md:max-h-[100vh]`,
+			`fixed top-[50%] left-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-lg border border-border/30 bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95`,
+			'max-h-[100dvh] max-w-full size-auto sm:max-w-lg md:w-auto md:size-auto md:max-w-[calc(100%-2rem)]',
 			className
 		)}
 		data-slot="dialog-content"
diff --git a/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte b/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
index f562694145..509b549dda 100644
--- a/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
@@ -12,8 +12,11 @@
 
 <div
 	bind:this={ref}
-	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
 	data-slot="dialog-header"
+	class={cn(
+		'flex flex-col gap-2 text-center sm:text-left sticky top-0 z-50 bg-background md:bg-transparent',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}