Widen run and new-run cards to max-w-5xl with a multi-column form layout

The narrower max-w-2xl card left a lot of unused width on scripts with
several variables, forcing a long single-column scroll. Widening the
card and laying out variable inputs in a responsive grid (up to 3
columns) uses that space; textareas and checkbox groups still span the
full width since they don't shrink well into a column.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/(app)/runs/[runId]/page.tsx

@@ -66,7 +66,7 @@ export default async function RunDetailPage({ params }: RunDetailPageProps) {
       }));
 
   return (
-    <div className="mx-auto flex max-w-2xl flex-col gap-4">
+    <div className="mx-auto flex max-w-5xl flex-col gap-4">
       <Card>
         <CardHeader>
           <CardTitle>{run.scriptName}</CardTitle>
@@ -119,7 +119,7 @@ export default async function RunDetailPage({ params }: RunDetailPageProps) {
               <span className="text-muted-foreground font-mono text-[0.7rem] font-medium tracking-widest uppercase">
                 Variables
               </span>
-              <dl className="grid gap-x-6 gap-y-2 rounded-md border p-3 text-xs sm:grid-cols-2">
+              <dl className="grid gap-x-6 gap-y-2 rounded-md border p-3 text-xs sm:grid-cols-2 lg:grid-cols-3">
                 {variableEntries.map(({ key, label, value }) => (
                   <div key={key} className="flex flex-col gap-0.5">
                     <dt className="text-muted-foreground">{label}</dt>

src/app/(app)/scripts/[scriptId]/page.tsx

@@ -55,7 +55,7 @@ export default async function ScriptPage({
   }
 
   return (
-    <div className="mx-auto max-w-2xl">
+    <div className="mx-auto max-w-5xl">
       <Card>
         <CardHeader>
           <CardTitle>{script.name}</CardTitle>

src/components/forms/dynamic-form.tsx

@@ -14,6 +14,11 @@ import { defaultValuesForScript } from "@/lib/config/defaults";
 import type { ClientScript } from "@/lib/config/serialize";
 import { FieldRenderer } from "./field-renderer";
 
+/** Controls whose content doesn't shrink well into a narrow grid column - long-form text,
+ * or a group of checkboxes that reads better as a single wide list - so they span the full
+ * grid width instead of sharing a row with other fields. */
+const WIDE_CONTROLS = new Set(["textarea", "checkboxGroup"]);
+
 /** `initialValues` comes from a previous run's (already-redacted) variables when re-running -
  * secret fields are deliberately excluded there (their stored value is just "***", not the real
  * one), so those always fall through to the normal default/empty state and have to be re-entered. */
@@ -93,9 +98,22 @@ export function DynamicForm({
             This script takes no parameters.
           </p>
         )}
-        {script.variables.map((variable) => (
+        {script.variables.length > 0 && (
-          <FieldRenderer key={variable.name} variable={variable} />
+          <div className="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2 lg:grid-cols-3">
-        ))}
+            {script.variables.map((variable) => (
+              <div
+                key={variable.name}
+                className={
+                  WIDE_CONTROLS.has(variable.control)
+                    ? "sm:col-span-2 lg:col-span-3"
+                    : undefined
+                }
+              >
+                <FieldRenderer variable={variable} />
+              </div>
+            ))}
+          </div>
+        )}
         <Button
           type="submit"
           disabled={form.formState.isSubmitting}