From c8e674a7b33cf84e07dcedbb6c3bf42561950ea8 Mon Sep 17 00:00:00 2001
From: snuziale <6452957+snuziale@users.noreply.github.com>
Date: Fri, 7 Aug 2026 11:11:08 -0700
Subject: [PATCH] fix(apollo-wind): anchor dialog close button inside the
 dialog

d1e34176 switched DialogContent from `fixed` + transform centering to a
flex child of DialogOverlay, which left the content statically
positioned. The close button's `absolute top-4 right-4` then resolved
against DialogOverlay (`fixed inset-0`), rendering the X in the
top-right corner of the page instead of the dialog.

Add `relative` to DialogContent to restore it as the containing block.
Also add `cursor-pointer` to the close button: Tailwind v4 dropped the
default pointer cursor on buttons, so the X did not read as clickable
the way the Button variants (which set it explicitly) do.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/apollo-wind/src/components/ui/dialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/apollo-wind/src/components/ui/dialog.tsx b/packages/apollo-wind/src/components/ui/dialog.tsx
index 840babfe3..8dba9ed67 100644
--- a/packages/apollo-wind/src/components/ui/dialog.tsx
+++ b/packages/apollo-wind/src/components/ui/dialog.tsx
@@ -57,7 +57,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
           data-slot="dialog-content"
           className={cn(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
             className
           )}
           ref={ref}
@@ -67,7 +67,7 @@ const DialogContent = React.forwardRef<
           {showCloseButton && (
             <DialogPrimitive.Close
               data-slot="dialog-close"
-              className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+              className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-default disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
             >
               <XIcon />
               <span className="sr-only">Close</span>