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

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

@@ -54,15 +54,17 @@ function AlertDialogContent({
return ( return (
<AlertDialogPortal> <AlertDialogPortal>
<AlertDialogOverlay /> <AlertDialogOverlay />
<div className="pointer-events-none fixed inset-0 z-50 grid place-items-center p-4">
<AlertDialogPrimitive.Content <AlertDialogPrimitive.Content
data-slot="alert-dialog-content" data-slot="alert-dialog-content"
data-size={size} data-size={size}
className={cn( 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", "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 className
)} )}
{...props} {...props}
/> />
</div>
</AlertDialogPortal> </AlertDialogPortal>
) )
} }

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

@@ -53,16 +53,18 @@ function DialogContent({
return ( return (
<DialogPortal> <DialogPortal>
<DialogOverlay /> <DialogOverlay />
<div className="pointer-events-none fixed inset-0 z-50 grid place-items-center p-4">
<DialogPrimitive.Content <DialogPrimitive.Content
data-slot="dialog-content" data-slot="dialog-content"
className={cn( 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", "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 className
)} )}
{...props} {...props}
> >
{children} {children}
</DialogPrimitive.Content> </DialogPrimitive.Content>
</div>
</DialogPortal> </DialogPortal>
) )
} }