From 9651ad83ae1c04417c5c761e90a50dd0676ac1fc Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 28 Jul 2026 17:33:20 -0400
Subject: [PATCH] fix: use span for close button to ensure true transparency

- Browser button elements have default background/border
- Span with onClick provides the same functionality with no defaults
- Maintains keyboard focus states and accessibility
---
 src/components/admin/narrative-flow/NodeEditDialog.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/admin/narrative-flow/NodeEditDialog.tsx b/src/components/admin/narrative-flow/NodeEditDialog.tsx
index e4d10e1..2d4a6c5 100644
--- a/src/components/admin/narrative-flow/NodeEditDialog.tsx
+++ b/src/components/admin/narrative-flow/NodeEditDialog.tsx
@@ -249,13 +249,13 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
         <DialogHeader>
           <DialogTitle className="flex items-center justify-between">
             <span>Edit {typeLabel}</span>
-            <button
+            <span
               onClick={() => onOpenChange(false)}
-              className="hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+              className="hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 rounded-full"
               aria-label="Close"
             >
-              <XIcon className="size-4 text-zinc-500" />
-            </button>
+              <XIcon className="size-8 text-zinc-500" />
+            </span>
           </DialogTitle>
         </DialogHeader>
         {renderFields()}