From 451a5a9d051b643b559d59f2a5d95008efbaa60d Mon Sep 17 00:00:00 2001
From: Auto <leon.vanzyl@gmail.com>
Date: Wed, 4 Feb 2026 12:42:04 +0200
Subject: [PATCH] fix: prevent dialog modal from being clipped on zoom

Add max-h-[calc(100vh-2rem)] and overflow-y-auto to the shared
DialogContent component so modals scroll vertically when their
content exceeds the viewport height (e.g., Settings modal when
browser is zoomed in).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ui/src/components/ui/dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/ui/dialog.tsx b/ui/src/components/ui/dialog.tsx
index daf6bf4..f96ccce 100644
--- a/ui/src/components/ui/dialog.tsx
+++ b/ui/src/components/ui/dialog.tsx
@@ -59,7 +59,7 @@ function DialogContent({
       <DialogPrimitive.Content
         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 outline-none 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-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none overflow-y-auto sm:max-w-lg",
           className
         )}
         {...props}