From b3f7c8caa783e9a514d665bb3c63be4a6a1f4abd Mon Sep 17 00:00:00 2001
From: Justin Bennett <git@just-be.dev>
Date: Tue, 8 Aug 2023 14:27:03 -0400
Subject: [PATCH 1/2] Change close button to absolute positioned have correct
 tab order

---
 libs/ui/lib/modal/Modal.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/libs/ui/lib/modal/Modal.tsx b/libs/ui/lib/modal/Modal.tsx
index a13f0267f9..4dcb9e8bda 100644
--- a/libs/ui/lib/modal/Modal.tsx
+++ b/libs/ui/lib/modal/Modal.tsx
@@ -58,7 +58,7 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) {
             >
               <Dialog.Portal>
                 <div
-                  className="DialogOverlay pointer-events-auto"
+                  className="DialogOverlay pointer-events-auto relative"
                   onClick={onDismiss}
                   aria-hidden
                 />
@@ -75,6 +75,12 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) {
                     </Dialog.Title>
                   )}
                   {children}
+                  <Dialog.Close
+                    className="absolute right-4 top-3 flex rounded p-2 hover:bg-hover"
+                    aria-label="Close"
+                  >
+                    <Close12Icon className="text-secondary" />
+                  </Dialog.Close>
                 </AnimatedDialogContent>
               </Dialog.Portal>
             </Dialog.Root>
@@ -99,9 +105,6 @@ const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(({ children, id }
     <h2 className="text-sans-semi-lg" id={id}>
       {children}
     </h2>
-    <Dialog.Close className="-m-2 flex rounded p-2 hover:bg-hover" aria-label="Close">
-      <Close12Icon className="text-secondary" />
-    </Dialog.Close>
   </div>
 ))
 

From 2088cf056f93b6dcb76daac5701a4ed31f870099 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 8 Aug 2023 19:36:02 +0100
Subject: [PATCH 2/2] Tweak alignment

---
 libs/ui/lib/modal/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/lib/modal/Modal.tsx b/libs/ui/lib/modal/Modal.tsx
index 4dcb9e8bda..d7d4a22cec 100644
--- a/libs/ui/lib/modal/Modal.tsx
+++ b/libs/ui/lib/modal/Modal.tsx
@@ -76,7 +76,7 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) {
                   )}
                   {children}
                   <Dialog.Close
-                    className="absolute right-4 top-3 flex rounded p-2 hover:bg-hover"
+                    className="absolute right-2 top-3 flex rounded p-2 hover:bg-hover"
                     aria-label="Close"
                   >
                     <Close12Icon className="text-secondary" />