From 752461343930b2806061bb23fbfb161534ba3248 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Wed, 15 Apr 2026 20:53:04 +0800
Subject: [PATCH] fix(ui): sharpen dialog rendering with flex centering and
 stronger ring

Replace translate-based centering with a grid place-items-center wrapper
to eliminate half-pixel subpixel blur on non-retina displays. Strengthen
the content border by switching from ring-foreground/5 to ring-border
and adding shadow-2xl for a clearer visual boundary.
---
 src/components/ui/alert-dialog.tsx | 20 +++++++++++---------
 src/components/ui/dialog.tsx       | 22 ++++++++++++----------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index dc40031..fc673d9 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -54,15 +54,17 @@ function AlertDialogContent({
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/5 gap-6 rounded-4xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
-        )}
-        {...props}
-      />
+      <div className="pointer-events-none fixed inset-0 z-50 grid place-items-center p-4">
+        <AlertDialogPrimitive.Content
+          data-slot="alert-dialog-content"
+          data-size={size}
+          className={cn(
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-border pointer-events-auto group/alert-dialog-content grid w-full gap-6 rounded-4xl p-6 shadow-2xl ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md",
+            className
+          )}
+          {...props}
+        />
+      </div>
     </AlertDialogPortal>
   )
 }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 7022637..9ca8ff6 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -53,16 +53,18 @@ function DialogContent({
   return (
     <DialogPortal>
       <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/5 gap-6 rounded-4xl p-6 ring-1 duration-100 fixed top-1/2 left-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Content>
+      <div className="pointer-events-none fixed inset-0 z-50 grid place-items-center p-4">
+        <DialogPrimitive.Content
+          data-slot="dialog-content"
+          className={cn(
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-border pointer-events-auto grid w-full max-w-md gap-6 rounded-4xl p-6 shadow-2xl ring-1 duration-100 outline-none",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </DialogPrimitive.Content>
+      </div>
     </DialogPortal>
   )
 }