fix(autopilots): contain Delivery dialog within viewport

Two related overflow bugs in the Delivery detail dialog (the popover you
open from a webhook deliveries row, shipped in #2784) became obvious as
soon as a real webhook payload was exercised:

1. **Horizontal overflow: minified JSON pushed dialog off-screen.**
   `CodeBlock`'s `<pre>` uses `white-space: pre` (default for the tag),
   which means a single-line minified JSON body had intrinsic
   min-content equal to the whole line's width. The parent grid cell
   inherits the default `min-width: auto` (= min-content), so a long
   body propagated all the way up and blew DialogContent past its
   `max-w-2xl` cap. Headers rendered fine because they're
   pretty-printed JSON with real newlines.

   Fix: `min-w-0` on the CodeBlock wrapper so it can shrink below
   min-content, plus `whitespace-pre-wrap break-all` on the `<pre>` so
   long lines wrap (`break-all` is the only modifier that breaks
   mid-token, which a minified JSON body needs because it has no
   whitespace to break at).

2. **Vertical overflow: dialog grew past viewport.**
   `DialogContent` had no height cap. With Raw body + Headers +
   Response body + Replay button stacked vertically, anything beyond
   the screen edge (notably the Replay button) became unreachable.

   Fix: `max-h-[85vh] overflow-y-auto` on `DialogContent`.

Both fixes are CSS-only in one file; HMR verified.

packages/views/autopilots/components/webhook-deliveries-section.tsx

@@ -246,7 +246,11 @@ function DeliveryDetailDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      {/* max-h + overflow-y-auto: webhook bodies + headers + response can
+          easily exceed viewport height. Without a cap the dialog grows past
+          the screen edge and the bottom (e.g. Replay button) becomes
+          unreachable. 85vh leaves breathing room around the dialog. */}
+      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
         <DialogTitle className="flex items-center gap-2">
           <Webhook className="h-4 w-4 text-muted-foreground" />
           {t(($) => $.deliveries.detail.title)}
@@ -445,7 +449,11 @@ function CodeBlock({ label, value }: { label: string; value: string }) {
   };
 
   return (
-    <div className="rounded-md border bg-background">
+    // min-w-0 lets this card shrink below the <pre>'s intrinsic min-content
+    // width — without it, a minified single-line JSON body would push the
+    // surrounding grid/flex cell (and the whole DialogContent) past the
+    // viewport edge.
+    <div className="min-w-0 rounded-md border bg-background">
       <div className="flex items-center justify-between border-b px-3 py-1.5 text-[11px]">
         <span className="font-medium text-muted-foreground">{label}</span>
         <button
@@ -463,7 +471,10 @@ function CodeBlock({ label, value }: { label: string; value: string }) {
             : t(($) => $.webhook_payload.copy)}
         </button>
       </div>
-      <pre className="max-h-48 overflow-auto bg-muted/40 px-3 py-2 text-xs font-mono leading-relaxed">
+      {/* whitespace-pre-wrap keeps pretty-printed indentation but lets
+          long lines wrap; break-all is the only thing that breaks mid-token
+          (necessary for minified JSON, which has no whitespace to break at). */}
+      <pre className="max-h-48 overflow-auto bg-muted/40 px-3 py-2 text-xs font-mono leading-relaxed whitespace-pre-wrap break-all">
         {display}
         {isTruncated && (
           <span className="block pt-2 text-muted-foreground/70">