[bug]: Dialog Alert Position

[Ace-Aryal]

Describe the bug

🐞 AlertDialog not centered in certain nested layouts (even with correct positioning)
❗ Summary
I spent over 2 hours debugging the AlertDialog component and discovered that the default centering strategy using left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 on the AlertDialogContent fails to center the dialog in some nested layouts (e.g., inside tables, deep flex containers, or modals).

🔍 Context
I was using AlertDialog inside a component rendered inside a table row ().

The dialog opened, but was not centered on the screen as expected.

I inspected the DOM and confirmed that the Content had the correct fixed, top-1/2, left-1/2, and translate classes.

However, the positioning was still off — possibly due to stacking context, transform inheritance, or deeply nested layout quirks.

✅ What finally worked
Instead of relying on Content for centering, I applied:

"fixed inset-0 z-50 bg-black/50 grid place-items-center"
to the Overlay, and removed the transform/positioning styles from the Content altogether. This forced true centering via the parent overlay grid.

🔧 Suggested Improvements
Consider exposing a centered prop that moves centering logic to the overlay (grid place-items-center) instead of the dialog content.

Alternatively, document this issue clearly — many users may not realize the default approach can break in real-world nested layouts.

💬 Additional Notes
This issue wastes a lot of time for devs, especially when debugging visually with Tailwind classes that seem correct.

I'm happy to provide a minimal repro if needed.

Thanks for the great work on ShadCN UI — this issue aside, the library is a joy to use.

Affected component/components

Alert Dialog

How to reproduce

1. try using alert dialog inside a deeply nested components the positioning will be off and out of the screen for mobile view
   eg. I had this table i

<Table>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={4}>
        <AlertDialog>
          <AlertDialogTrigger>
            <Button>Reset</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>This will reset the schedule.</AlertDialogDescription>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Confirm</AlertDialogAction>
          </AlertDialogContent>
        </AlertDialog>
      </TableCell>
    </TableRow>
  </TableFooter>
</Table>

Codesandbox/StackBlitz link

No response

Logs

System Info

Tool / Env	Version / Info
Package  	@shadcn/ui latest 
React   	19
Framework	Vite + React
Tailwind CSS	v4
Radix UI	@radix-ui/react-alert-dialog (latest)
Browser	        Brave
OS      	Windows 10 Pro
Screen Resolution	1366×768 
Dialog Placement	Inside nested <Table> element (TableFooter)
Customizations  	No major changes — using default ShadCN layout

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[shadcn]

@Ace-Aryal Can you share a codesandbox link if possible? Thank you