@@ -0,0 +1,38 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  AlertDialog,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./alert-dialog";
+
+describe("alert dialog description", () => {
+  it("keeps a long payload in a bounded scroll region so the actions stay put", () => {
+    const payload = `{elements:[${"x".repeat(4_000)}]}`;
+    const markup = renderToStaticMarkup(
+      <AlertDialog>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Allow excalidraw to run export_to_excalidraw?</AlertDialogTitle>
+          <AlertDialogDescription>{payload}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>Cancel</AlertDialogFooter>
+      </AlertDialog>,
+    );
+    const header = /<div[^>]*data-slot="alert-dialog-header"[^>]*>/.exec(markup)?.[0] ?? "";
+    const description = /<p[^>]*data-slot="alert-dialog-description"[^>]*>/.exec(markup)?.[0] ?? "";
+
+    // The whole payload stays available to inspect, untruncated…
+    expect(markup).toContain(payload);
+    // …but bounded: the header may shrink inside the height-capped popup and
+    // the description scrolls instead of pushing the footer off screen.
+    expect(header).toContain("min-h-0");
+    expect(description).toContain("max-h-[min(24rem,60dvh)]");
+    expect(description).toContain("overflow-y-auto");
+    expect(description).toContain("overscroll-contain");
+    expect(description).toContain("wrap-anywhere");
+    expect(markup.indexOf("</p>")).toBeLessThan(markup.indexOf("Cancel"));
+  });
+});
@@ -70,7 +70,10 @@ function AlertDialogPopup({
 function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left", className)}
+      className={cn(
+        "flex min-h-0 flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left",
+        className,
+      )}
       data-slot="alert-dialog-header"
       {...props}
     />
@@ -101,7 +104,7 @@ function AlertDialogFooter({
 function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
   return (
     <AlertDialogPrimitive.Title
-      className={cn("wrap-anywhere font-semibold text-xl leading-none", className)}
+      className={cn("wrap-anywhere shrink-0 font-semibold text-xl leading-none", className)}
       data-slot="alert-dialog-title"
       {...props}
     />
@@ -111,7 +114,13 @@ function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Pr
 function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
   return (
     <AlertDialogPrimitive.Description
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn(
+        // A long description (say, the arguments of a tool call awaiting
+        // approval) scrolls in place instead of pushing the actions out of
+        // the popup, which the viewport already caps.
+        "wrap-anywhere max-h-[min(24rem,60dvh)] min-h-0 overflow-y-auto overscroll-contain text-muted-foreground text-sm select-text",
+        className,
+      )}
       data-slot="alert-dialog-description"
       {...props}
     />