wuxu/codeg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): sharpen dialog rendering with flex centering and stronger ring

Browse Source 
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.
This commit is contained in:
xintaofei
2026-04-15 20:53:04 +08:00
parent e9dd0db6e8
commit 7524613439
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ui/alert-dialog.tsx
View File

@@ -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>
)
}

22
src/components/ui/dialog.tsx
View File

@@ -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>
)
}