From d3e02783b0f607a1e3b0aa6645fcfd3ac66606a5 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 22 Aug 2026 13:12:05 +0200
Subject: [PATCH] ui: move dialog close button to the sticky header

Assisted-by: pi
---
 .../app/dialogs/DialogMermaidPreview.svelte   |  1 +
 .../ui/dialog/dialog-content.svelte           |  2 +-
 .../components/ui/dialog/dialog-header.svelte | 21 ++++++++++++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte b/tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte
index 09e53442ac..e741373497 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte
@@ -14,6 +14,7 @@
 <Dialog.Root bind:open {onOpenChange}>
 	<Dialog.Content
 		class="z-999999 grid max-h-full max-w-full! grid-rows-[1fr_auto] overflow-hidden p-0 md:h-[90vh] md:max-w-[90vw]!"
+		showCloseButton
 	>
 		<MermaidPreview {svgHtml} />
 	</Dialog.Content>
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 6657f5735c..8a1a5909d5 100644
--- a/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte
@@ -10,7 +10,7 @@
 		class: className,
 		portalProps,
 		ref = $bindable(null),
-		showCloseButton = true,
+		showCloseButton = false,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: DialogPrimitive.PortalProps;
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 509b549dda..99abfce4be 100644
--- a/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
 	import { cn, type WithElementRef } from '$lib/components/ui/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -6,10 +8,18 @@
 		children,
 		class: className,
 		ref = $bindable(null),
+		showCloseButton = true,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
 </script>
 
+<!--
+	Header is `sticky`, so it stays at the top while the dialog body scrolls. The close
+	button lives here (not in the body) so it sticks together with the title. `sticky`
+	makes it the containing block, so the close can be absolutely placed at its corner.
+-->
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
@@ -20,4 +30,13 @@
 	{...restProps}
 >
 	{@render children?.()}
+
+	{#if showCloseButton}
+		<DialogPrimitive.Close
+			class="absolute top-0 right-0 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+		>
+			<XIcon />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	{/if}
 </div>