Widen the column from 700px to 960px

The measure was chosen for prose, but most of the app isn't prose: the
before/after comparison is two answers meant to be compared side by side,
and the dataset preview is a fixed 420px panel. Both were sharing 700px
while half the screen sat empty, and the vertical space that costs is
exactly what was in short supply.

Safe to widen because text already carries its own caps in ch -- the lede
at 34ch, notes and descriptions at 62-70ch -- so nothing prose-like
stretches with the column.

The exception was the conversation preview, whose turns were capped at 86%
of the container: at 960px that is 825px, well past 120 characters a line.
Those now use a 68ch measure, so a turn still looks like a turn.

src/components/Chrome.tsx

@@ -78,7 +78,7 @@ function Runs({ runs, onOpen }: { runs: Run[]; onOpen: (id: string) => void }) {
             onClick={() => setOpen(false)}
           />
           <div className="absolute inset-x-0 top-12 z-50 border-b border-line bg-panel">
-            <div className="mx-auto max-w-[700px] px-5">
+            <div className="mx-auto max-w-[960px] px-5">
               {runs.map((r) => {
                 const done = r.status === "done";
                 const failed = r.status === "error";
@@ -132,7 +132,7 @@ export function Header({
   return (
     <header className="sticky top-0 z-40 border-b border-line bg-bg/90 backdrop-blur">
       {/* Same measure as every screen — the wordmark lines up with the column. */}
-      <div className="mx-auto flex h-12 max-w-[700px] items-center justify-between gap-4 px-5">
+      <div className="mx-auto flex h-12 max-w-[960px] items-center justify-between gap-4 px-5">
         {onHome ? (
           <button onClick={onHome} aria-label="Back to the start">
             <Wordmark />

src/components/ConversationPreview.tsx

@@ -77,7 +77,7 @@ function Turn({
   if (message.role === "tool") {
     return (
       <div className={cn("flex justify-start", dimmed && "opacity-35")}>
-        <div className="min-w-0 max-w-[86%] border-l-2 border-line pl-3">
+        <div className="min-w-0 max-w-[68ch] border-l-2 border-line pl-3">
           <div className="cap mb-1 text-dim">
             {message.name ? `${message.name} answered` : "the tool answered"}
           </div>
@@ -92,7 +92,7 @@ function Turn({
   if (calls.length > 0) {
     return (
       <div className={cn("flex justify-end", dimmed && "opacity-35")}>
-        <div className="min-w-0 max-w-[86%]">
+        <div className="min-w-0 max-w-[68ch]">
           <div className="cap mb-1.5 text-right">assistant</div>
           <div className="flex flex-col gap-2">
             {calls.map((call, index) => (
@@ -110,7 +110,12 @@ function Turn({
 
   return (
     <div className={cn("flex", reply ? "justify-end" : "justify-start")}>
-      <div className={cn("max-w-[86%] min-w-0", dimmed && "opacity-35")}>
+      {/*
+        A character measure, not a percentage. The column is wider than it was, and a
+        line of dialogue at 86% of it would run past 120 characters — unreadable, and
+        the turns would stop looking like turns.
+      */}
+      <div className={cn("max-w-[68ch] min-w-0", dimmed && "opacity-35")}>
         <div className={cn("cap mb-1.5", reply && "text-right")}>{message.role}</div>
         <div
           className={cn(

src/screens/Auth.tsx

@@ -31,7 +31,7 @@ export function Auth({ onSignedIn }: { onSignedIn: (token: string) => Promise<vo
   };
 
   return (
-    <div className="mx-auto flex min-h-[calc(100vh-3rem)] max-w-[700px] flex-col justify-center gap-7 px-5 pb-24">
+    <div className="mx-auto flex min-h-[calc(100vh-3rem)] max-w-[960px] flex-col justify-center gap-7 px-5 pb-24">
       <Lede className="max-w-[30ch]">
         <i>Fine-tune a model on your own conversations.</i>
       </Lede>
@@ -80,7 +80,7 @@ export function Auth({ onSignedIn }: { onSignedIn: (token: string) => Promise<vo
 /** Shown for the moment the session check takes. */
 export function Checking() {
   return (
-    <div className="mx-auto flex min-h-[calc(100vh-3rem)] max-w-[700px] items-center px-5">
+    <div className="mx-auto flex min-h-[calc(100vh-3rem)] max-w-[960px] items-center px-5">
       <Cap>Checking your session…</Cap>
     </div>
   );

src/screens/CheckData.tsx

@@ -27,7 +27,7 @@ function Notes({ issues }: { issues: Issue[] }) {
 
 function Reading({ dataset }: { dataset: DatasetSummary }) {
   return (
-    <div className="mx-auto max-w-[700px] px-5 pt-32">
+    <div className="mx-auto max-w-[960px] px-5 pt-32">
       <div className="flex items-center gap-3 text-[13px] text-mut">
         <Spinner className="text-hot" />
         Reading {dataset.id}
@@ -62,7 +62,7 @@ export function CheckData({
 
   if (error) {
     return (
-      <div className="mx-auto flex max-w-[700px] flex-col items-start gap-6 px-5 pt-32">
+      <div className="mx-auto flex max-w-[960px] flex-col items-start gap-6 px-5 pt-32">
         <Lede>
           <i>{error}</i>
         </Lede>
@@ -90,7 +90,7 @@ export function CheckData({
   );
 
   return (
-    <div className="mx-auto flex max-w-[700px] flex-col gap-7 px-5 pt-10 pb-16">
+    <div className="mx-auto flex max-w-[960px] flex-col gap-7 px-5 pt-10 pb-16">
       <button
         onClick={onBack}
         className="cap self-start transition-colors hover:text-ink"

src/screens/Done.tsx

@@ -66,7 +66,7 @@ export function Done({ run, onRestart }: { run: Run; onRestart: () => void }) {
      * minutes for is the proof that their model came out different, and that belongs
      * above the fold. So: what happened, shown; then where it lives.
      */
-    <div className="mx-auto flex max-w-[700px] flex-col gap-8 px-5 pt-10 pb-20">
+    <div className="mx-auto flex max-w-[960px] flex-col gap-8 px-5 pt-10 pb-20">
       <Lede>
         <i>Your model is ready.</i> <em>Here's what changed.</em>
       </Lede>

src/screens/Running.tsx

@@ -87,7 +87,7 @@ export function Running({ run }: { run: Run }) {
 
   if (run.status === "error") {
     return (
-      <div className="mx-auto flex max-w-[700px] flex-col gap-6 px-5 pt-10 pb-20">
+      <div className="mx-auto flex max-w-[960px] flex-col gap-6 px-5 pt-10 pb-20">
         <Lede>
           <i>This run stopped early.</i>
         </Lede>
@@ -100,7 +100,7 @@ export function Running({ run }: { run: Run }) {
   }
 
   return (
-    <div className="mx-auto flex max-w-[700px] flex-col gap-8 px-5 pt-10 pb-20">
+    <div className="mx-auto flex max-w-[960px] flex-col gap-8 px-5 pt-10 pb-20">
       <Lede>
         <i>{eta(run.etaSeconds)}.</i> <em>You can close this page.</em>
       </Lede>

src/screens/Start.tsx

@@ -181,7 +181,7 @@ export function Start({
   }, [query, user, token]);
 
   return (
-    <div className="mx-auto flex max-w-[700px] flex-col gap-8 px-5 pt-10 pb-24">
+    <div className="mx-auto flex max-w-[960px] flex-col gap-8 px-5 pt-10 pb-24">
       <Lede>
         <i>Pick a model and a dataset.</i>
       </Lede>
@@ -256,7 +256,7 @@ export function Start({
       {/* -------------------------------------------------------- sticky bar */}
       {dataset && (
         <div className="fixed inset-x-0 bottom-0 z-30 border-t border-line bg-bg/95 backdrop-blur">
-          <div className="mx-auto flex max-w-[700px] items-center justify-between gap-4 px-5 py-3">
+          <div className="mx-auto flex max-w-[960px] items-center justify-between gap-4 px-5 py-3">
             <span className="min-w-0 truncate text-[12.5px]">
               {dataset.id} <span className="text-dim">· {fmt(dataset.rows)} conversations</span>
             </span>