Fix docs pages overflowing horizontally on mobile

GFM tables (config reference's Field/Type/Default/Notes tables) are
wider than a phone screen and don't wrap, so without their own scroll
container they forced the whole page to scroll horizontally instead.
Wrap rendered tables in an overflow-x-auto div, and let long unbroken
strings in table cells and inline code (env var names, paths) break
instead of forcing extra width.

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

src/app/(app)/not-found.tsx

@@ -0,0 +1,5 @@
+import { NotFoundContent } from "@/components/layout/not-found-content";
+
+export default function NotFound() {
+  return <NotFoundContent />;
+}

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

@@ -71,7 +71,7 @@ export default async function RunDetailPage({ params }: RunDetailPageProps) {
         <CardHeader>
           <CardTitle>{run.scriptName}</CardTitle>
           {script && (
-            <CardAction>
+            <CardAction className="row-span-1">
               <Link
                 href={`/scripts/${run.scriptId}?fromRun=${run.id}`}
                 className={buttonVariants({ variant: "outline", size: "sm" })}
@@ -81,7 +81,7 @@ export default async function RunDetailPage({ params }: RunDetailPageProps) {
               </Link>
             </CardAction>
           )}
-          <dl className="text-muted-foreground grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:grid-cols-3">
+          <dl className="text-muted-foreground col-span-2 grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:grid-cols-3">
             <div>
               <dt className="font-mono text-[0.7rem] font-medium tracking-widest uppercase">
                 Triggered by

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { NotFoundContent } from "@/components/layout/not-found-content";
+
+export default function NotFound() {
+  return <NotFoundContent />;
+}

src/components/docs/markdown-viewer.tsx

@@ -2,6 +2,19 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "@/lib/utils";
 
+// GFM tables (the config reference's Field/Type/Default/Notes tables) are wider than a phone
+// screen and don't wrap - without their own scroll container the table forces the whole page
+// to scroll horizontally instead. The typography plugin's table styles still apply to `table`
+// here (its selectors match any descendant, not just direct children of `.prose`), so this
+// wrapper only adds the scroll boundary.
+function Table(props: React.ComponentProps<"table">) {
+  return (
+    <div className="overflow-x-auto">
+      <table {...props} />
+    </div>
+  );
+}
+
 export function MarkdownViewer({ content }: { content: string }) {
   return (
     <div
@@ -13,9 +26,14 @@ export function MarkdownViewer({ content }: { content: string }) {
         // elsewhere in the app (see the "no scripts configured" message on the dashboard).
         "prose-code:before:content-none prose-code:after:content-none",
         "prose-code:rounded prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:font-normal prose-code:text-foreground",
+        // Long unbroken strings (env var names, paths) in table cells or inline code would
+        // otherwise force their column/line wider than the viewport instead of wrapping.
+        "prose-td:break-words prose-th:break-words prose-code:break-words",
       )}
     >
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={{ table: Table }}>
+        {content}
+      </ReactMarkdown>
     </div>
   );
 }

src/components/layout/not-found-content.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { Home } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function NotFoundContent() {
+  return (
+    <div className="mx-auto flex max-w-md flex-col items-center gap-3 py-24 text-center">
+      <span className="text-primary font-mono text-6xl font-semibold tracking-tight">
+        404
+      </span>
+      <h1 className="font-heading text-xl font-medium">Page not found</h1>
+      <p className="text-muted-foreground text-sm">
+        The page you&rsquo;re looking for doesn&rsquo;t exist or may have been
+        moved.
+      </p>
+      <Link
+        href="/"
+        className={cn(
+          buttonVariants({ variant: "outline", size: "sm" }),
+          "mt-2",
+        )}
+      >
+        <Home className="size-3.5" />
+        Back to dashboard
+      </Link>
+    </div>
+  );
+}

src/lib/runner/build-args.ts

@@ -18,6 +18,15 @@ function stringifyValue(value: unknown, joinWith: string): string {
   return String(value);
 }
 
+/** Quotes a value for the human-readable `redactedCommandLine` display only - the real
+ * invocation always passes values as discrete argv elements/env vars (see build note below),
+ * so this never affects execution. Without it, a value like "Glitz and glam" renders as three
+ * bare words indistinguishable from separate argv entries. */
+function quoteForDisplay(value: string): string {
+  if (value !== "" && /^[a-zA-Z0-9_@%+=:,./-]+$/.test(value)) return value;
+  return `"${value.replace(/([$`"\\])/g, "\\$1")}"`;
+}
+
 /** Builds an argv-array invocation from validated variable values. Never produces a shell string. */
 export function buildInvocation(
   script: ScriptConfig,
@@ -43,7 +52,10 @@ export function buildInvocation(
         const argName = variable.argName!;
         const value = stringifyValue(raw, variable.joinWith);
         argv.push(argName, value);
-        redactedArgv.push(argName, variable.secret ? REDACTED : value);
+        redactedArgv.push(
+          argName,
+          variable.secret ? REDACTED : quoteForDisplay(value),
+        );
         break;
       }
       case "flag": {
@@ -57,7 +69,7 @@ export function buildInvocation(
         const value = stringifyValue(raw, variable.joinWith);
         env[variable.envName!] = value;
         redactedEnvAssignments.push(
-          `${variable.envName}=${variable.secret ? REDACTED : value}`,
+          `${variable.envName}=${variable.secret ? REDACTED : quoteForDisplay(value)}`,
         );
         break;
       }