From 9783858168968e2930b368707d9049956409000b Mon Sep 17 00:00:00 2001 From: Camiel van Schoonhoven Date: Tue, 3 Nov 2026 11:12:42 -0700 Subject: [PATCH] fix(ui): keep dialogs inside the window and scroll what doesn't fit Dialogs sat in the middle of the window with no height limit. Content taller than the window ran off both edges, taking the title and the footer's buttons with it, with no way to scroll to them. A laptop at 125-150% browser zoom, or with devtools docked at the bottom, is enough. Dialog and alert dialog content now stop at 90% of the window's height and scroll. Dialogs that already set their own height or overflow keep it, because their classes override the defaults. Co-Authored-By: Claude Opus 5.5 (1M context) --- src/components/ui/alert-dialog.tsx | 2 +- src/components/ui/dialog.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx index e7447ad8ad..e4c55c8488 100644 --- a/src/components/ui/alert-dialog.tsx +++ b/src/components/ui/alert-dialog.tsx @@ -61,7 +61,7 @@ function AlertDialogContent({ ref={guardRef} data-slot="alert-dialog-content" className={cn( - "bg-background 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-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", + "bg-background 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-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className, )} {...props} diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index b00537d6cf..cc73970894 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -92,7 +92,7 @@ function DialogContent({ ref={guardRef} data-slot="dialog-content" className={cn( - "bg-background 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-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", + "bg-background 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-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className, )} onKeyDown={handleKeyDown}