diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index 886c760c..6c3f2679 100644 --- a/components/ui/dialog.tsx +++ b/components/ui/dialog.tsx @@ -49,7 +49,11 @@ const DialogContent = React.forwardRef< } }} className={cn( - "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-[var(--shadow-md)] max-h-[calc(100dvh-2rem)] overflow-y-auto scrollbar-visible data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 sm:rounded-xl", + // grid-cols-[minmax(0,1fr)]: the implicit auto track sizes to the widest + // child's min-content, and nowrap text (truncate) counts at full width + // there, so one long description widens every sibling past the dialog + // edge. minmax(0,1fr) caps the track at the content box. + "fixed left-[50%] top-[50%] z-50 grid grid-cols-[minmax(0,1fr)] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-[var(--shadow-md)] max-h-[calc(100dvh-2rem)] overflow-y-auto scrollbar-visible data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 sm:rounded-xl", className )} {...props}