sax3l/accounted
3
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): cap DialogContent grid track so nowrap children cannot widen modals (#1962)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Mattsson
2026-08-26 21:14:06 +02:00
committed by GitHub
parent ff84c8f316
commit 84e6b1eb17
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ui/dialog.tsx
+5 -1
View File
@@ -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}