From 84e6b1eb17d073742bbd2db99347ac95ddd54145 Mon Sep 17 00:00:00 2001 From: Mattsson <111893710+mattssonn@users.noreply.github.com> Date: Wed, 26 Aug 2026 21:14:06 +0200 Subject: [PATCH] fix(ui): cap DialogContent grid track so nowrap children cannot widen modals (#1962) DialogContent is display:grid with an implicit auto column, and the auto track sizes to the widest child's min-content. Chrome counts nowrap text (truncate, whitespace-nowrap) at its full width in that calculation even though it truncates at layout time, so one long description (e.g. a candidate row in MatchVerifikationPicker) widened the track past the dialog, stretched every sibling, and clipped the right edge behind a horizontal scrollbar. grid-cols-[minmax(0,1fr)] caps the track at the content box, hardening every modal at once; callers can still override via className (tailwind-merge resolves the conflict in their favor). Verified with a headless-Chrome replica of the reported dialog: scrollWidth 696 vs clientWidth 510 before, 510/510 after. Co-authored-by: Claude Fable 5 --- components/ui/dialog.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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}