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>

.gitea/workflows/release.yaml

@@ -25,7 +25,6 @@ jobs:
       - run: pnpm run typecheck
       - run: pnpm run format:check
       - run: pnpm run test
-      - run: pnpm run build
 
       - name: Set package version from the tag
         run: npm pkg set version="${GITHUB_REF_NAME#v}"

docs/CONFIG_REFERENCE.md

@@ -101,7 +101,7 @@ Type-specific fields:
 | `string`      | `text` (or `password` if `secret: true`) | `textarea` (needs `multiline: true`), `password` |
 | `number`      | `number`                                 | `slider` (requires both `min` and `max`)         |
 | `boolean`     | `checkbox`                               | `switch`                                         |
-| `enum`        | `select`                                 | `radio`                                          |
+| `enum`        | `select`                                 | `radio`, `combobox` (searchable, single-select)  |
 | `multiselect` | `multiselect` (combobox)                 | `checkboxGroup`                                  |
 
 ### `passAs` semantics

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

@@ -66,12 +66,12 @@ 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>
           {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
@@ -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/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/forms/controls/combobox.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface ComboboxProps {
+  choices: string[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function Combobox({
+  choices,
+  value,
+  onChange,
+  placeholder = "Select...",
+}: ComboboxProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        className={cn(
+          buttonVariants({ variant: "outline" }),
+          "h-auto min-h-8 w-full justify-between font-normal",
+        )}
+      >
+        <span
+          className={cn("flex-1 text-left", !value && "text-muted-foreground")}
+        >
+          {value || placeholder}
+        </span>
+        <ChevronsUpDown className="text-muted-foreground size-4 shrink-0" />
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0">
+        <Command>
+          <CommandInput placeholder="Search..." />
+          <CommandList>
+            <CommandEmpty>No matches.</CommandEmpty>
+            <CommandGroup>
+              {choices.map((choice) => (
+                <CommandItem
+                  key={choice}
+                  onSelect={() => {
+                    onChange(choice);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 size-4",
+                      value === choice ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {choice}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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}

src/components/forms/field-renderer.tsx

@@ -24,6 +24,7 @@ import {
 import { Slider } from "@/components/ui/slider";
 import { Label } from "@/components/ui/label";
 import { MultiSelect } from "./controls/multi-select";
+import { Combobox } from "./controls/combobox";
 import type { ClientVariable } from "@/lib/config/serialize";
 
 export function FieldRenderer({ variable }: { variable: ClientVariable }) {
@@ -211,6 +212,29 @@ export function FieldRenderer({ variable }: { variable: ClientVariable }) {
               </FormItem>
             );
 
+          case "combobox":
+            return (
+              <FormItem>
+                <FormLabel>
+                  {label}
+                  {variable.required && (
+                    <span className="text-destructive"> *</span>
+                  )}
+                </FormLabel>
+                <FormControl>
+                  <Combobox
+                    choices={variable.type === "enum" ? variable.choices : []}
+                    value={field.value ?? ""}
+                    onChange={(value) => field.onChange(value)}
+                  />
+                </FormControl>
+                {variable.description && (
+                  <FormDescription>{variable.description}</FormDescription>
+                )}
+                <FormMessage />
+              </FormItem>
+            );
+
           case "radio":
             return (
               <FormItem>

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/components/runs/xterm-view.tsx

@@ -95,7 +95,7 @@ export const XtermView = forwardRef<XtermViewHandle, XtermViewProps>(
     return (
       <div
         ref={containerRef}
-        className="h-[60vh] overflow-hidden bg-[#101215] p-2"
+        className="aspect-video w-full overflow-hidden bg-[#101215] p-2"
       />
     );
   },

src/lib/config/schema.ts

@@ -18,6 +18,7 @@ const controlSchema = z.enum([
   "switch",
   "select",
   "radio",
+  "combobox",
   "multiselect",
   "checkboxGroup",
 ]);
@@ -115,6 +116,13 @@ const variableWithChecks = variableSchema.superRefine((variable, ctx) => {
       path: ["control"],
     });
   }
+  if (variable.control === "combobox" && variable.type !== "enum") {
+    ctx.addIssue({
+      code: "custom",
+      message: "control 'combobox' requires type 'enum'",
+      path: ["control"],
+    });
+  }
   if (
     variable.control === "slider" &&
     variable.type === "number" &&

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,
@@ -26,6 +35,7 @@ export function buildInvocation(
   const argv = [...script.args];
   const env: Record<string, string> = {};
   const redactedArgv = [...script.args];
+  const redactedEnvAssignments: string[] = [];
   const redactedVariables: Record<string, unknown> = {};
 
   for (const variable of script.variables) {
@@ -42,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": {
@@ -55,6 +68,9 @@ export function buildInvocation(
       case "env": {
         const value = stringifyValue(raw, variable.joinWith);
         env[variable.envName!] = value;
+        redactedEnvAssignments.push(
+          `${variable.envName}=${variable.secret ? REDACTED : quoteForDisplay(value)}`,
+        );
         break;
       }
       case "stdin": {
@@ -74,7 +90,11 @@ export function buildInvocation(
       )
     : undefined;
 
-  const redactedCommandLine = [script.command, ...redactedArgv].join(" ");
+  const redactedCommandLine = [
+    ...redactedEnvAssignments,
+    script.command,
+    ...redactedArgv,
+  ].join(" ");
 
   return { argv, env, stdin, redactedVariables, redactedCommandLine };
 }