diff --git a/src/components/AIErrorHelper.tsx b/src/components/AIErrorHelper.tsx
index fa29e07..2c77e5c 100644
--- a/src/components/AIErrorHelper.tsx
+++ b/src/components/AIErrorHelper.tsx
@@ -81,7 +81,7 @@ Keep your response concise, friendly, and focused on practical solutions. Format
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
-          <DialogHeader>
+          <DialogHeader className="pr-8">
             <DialogTitle className="flex items-center gap-2">
               <Sparkle className="h-5 w-5 text-accent" weight="fill" />
               AI Error Analysis
diff --git a/src/components/SnippetDialog.tsx b/src/components/SnippetDialog.tsx
index 872f7f8..5b5a2bb 100644
--- a/src/components/SnippetDialog.tsx
+++ b/src/components/SnippetDialog.tsx
@@ -123,7 +123,7 @@ export function SnippetDialog({ open, onOpenChange, onSave, editingSnippet }: Sn
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-hidden flex flex-col">
-        <DialogHeader>
+        <DialogHeader className="pr-8">
           <DialogTitle className="text-2xl">
             {editingSnippet?.id ? strings.snippetDialog.edit.title : strings.snippetDialog.create.title}
           </DialogTitle>
diff --git a/src/components/SnippetViewer.tsx b/src/components/SnippetViewer.tsx
index df9691a..f73d678 100644
--- a/src/components/SnippetViewer.tsx
+++ b/src/components/SnippetViewer.tsx
@@ -46,7 +46,7 @@ export function SnippetViewer({ snippet, open, onOpenChange, onEdit, onCopy }: S
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[95vw] sm:max-h-[95vh] h-[95vh] overflow-hidden flex flex-col p-0">
-        <DialogHeader className="px-6 pt-6 pb-4 border-b border-border">
+        <DialogHeader className="px-6 pt-6 pb-4 pr-14 border-b border-border">
           <div className="flex items-start justify-between gap-4">
             <div className="flex-1 min-w-0 space-y-2">
               <div className="flex items-center gap-3">
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index e7eac9d..f99bff4 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -61,7 +61,7 @@ function DialogContent({
         {...props}
       >
         {children}
-        <DialogPrimitive.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">
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 z-10 rounded-sm 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">
           <XIcon />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>