Make cron table columns content-sized

web/src/components/CronSettings.tsx

@@ -73,11 +73,7 @@ const when = (iso: string | null, zone: string, now: number) => {
   const delta = value - now;
   if (delta > 0 && delta < 60 * 60_000) return `in ${Math.max(1, Math.round(delta / 60_000))}m`;
   if (delta > 0 && delta < 24 * 60 * 60_000) return `in ${Math.max(1, Math.round(delta / 3_600_000))}h`;
-  try {
-    return new Intl.DateTimeFormat(undefined, {
-      timeZone: zone, weekday: 'short', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
-    }).format(new Date(value));
-  } catch { return new Date(value).toLocaleString(); }
+  return compactWhen(iso, zone);
 };
 const compactWhen = (iso: string, zone: string) => {
   const value = Date.parse(iso);
@@ -290,19 +286,22 @@ export default function CronSettings({ clis }: { clis: Cli[] }) {
             <thead><tr><th>Job</th><th>Agent</th><th>Type</th><th>Interval</th><th>State</th><th>Next</th><th>Last run</th><th>Actions</th></tr></thead>
             <tbody>{jobs.map((job) => {
               const type = clis.find((candidate) => candidate.id === job.agent.cli)?.label || job.agent.cli;
+              const lastTitle = job.last
+                ? [duration(job.last.durationMs), job.last.error].filter(Boolean).join(' · ')
+                : '';
               return (
                 <tr
                   key={job.id} className={editingId === job.id ? 'editing' : ''} tabIndex={0}
                   aria-selected={editingId === job.id}
                   onClick={() => edit(job)} onKeyDown={(event) => editFromKeyboard(event, job)}
                 >
-                  <td title={job.name}>{job.name}</td>
-                  <td title={job.agent.name}>{job.agent.name}</td>
+                  <td className="cron-name" title={job.name}>{job.name}</td>
+                  <td className="cron-name" title={job.agent.name}>{job.agent.name}</td>
                   <td className="cron-type" aria-label={type} title={type}><Logo cli={job.agent.cli} size={14} /></td>
                   <td>{intervalName(job)}</td>
                   <td className={`cron-state ${job.state}`}>{job.state}</td>
                   <td className="cron-dim">{when(job.next, job.schedule.tz, now)}</td>
-                  <td title={job.last?.error || ''}>{job.last ? <><span className={`cron-last ${job.last.status}`}>{job.last.status}</span> <span className="cron-dim">{duration(job.last.durationMs)} · {compactWhen(job.last.at, job.schedule.tz)}</span></> : <span className="cron-dim">—</span>}</td>
+                  <td title={lastTitle}>{job.last ? <><span className={`cron-last ${job.last.status}`}>{job.last.status}</span> <span className="cron-dim">· {compactWhen(job.last.at, job.schedule.tz)}</span></> : <span className="cron-dim">—</span>}</td>
                   <td onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}><span className="cron-actions">
                     <button className="btn-ghost" disabled={busy === job.id} onClick={() => act(job.id, () => api.runCron(job.id))}>Run now</button>
                     <button className="btn-ghost" disabled={busy === job.id} onClick={() => act(job.id, () => api.updateCron(job.id, { state: job.state === 'running' ? 'stopped' : 'running' }))}>{job.state === 'running' ? 'Stop' : 'Start'}</button>

web/src/styles.css

@@ -1432,16 +1432,16 @@ a.btn-ghost { text-decoration: none; }
 .cron-message { margin-top: 14px; }
 .cron-page h3 { margin-top: 24px; }
 .cron-table-wrap { margin-top: 8px; border-top: 1px solid var(--border); }
-.cron-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; font-size: 11.5px; }
-.cron-col-job, .cron-col-agent { width: auto; }
-.cron-col-type { width: 42px; }
-.cron-col-interval { width: 130px; }
-.cron-col-state { width: 62px; }
-.cron-col-next { width: 82px; }
-.cron-col-last { width: 158px; }
-.cron-col-actions { width: 174px; }
-.cron-table th { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font: 500 10px var(--font-mono); letter-spacing: 0.045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
-.cron-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); overflow: hidden; color: var(--text); font-family: var(--font-mono); text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
+.cron-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 11.5px; }
+/* The two unbounded names share whatever is left. Every other column takes its
+   intrinsic, one-line width, so state/date/action labels cannot be sacrificed
+   to a long name or to widths tuned for one particular viewport. */
+.cron-col-job, .cron-col-agent { width: 50%; }
+.cron-col-type, .cron-col-interval, .cron-col-state, .cron-col-next,
+.cron-col-last, .cron-col-actions { width: 1%; }
+.cron-table th { padding: 7px 5px; border-bottom: 1px solid var(--border); color: var(--muted); font: 500 10px var(--font-mono); letter-spacing: 0.045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
+.cron-table td { padding: 7px 5px; border-bottom: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); vertical-align: middle; white-space: nowrap; }
+.cron-table td.cron-name { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .cron-table tbody tr { cursor: pointer; }
 .cron-table tbody tr:hover, .cron-table tbody tr.editing { background: var(--panel-2); }
 .cron-table tbody tr:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
@@ -1452,7 +1452,7 @@ a.btn-ghost { text-decoration: none; }
 .cron-state.stopped { color: var(--muted); }
 .cron-last.failed { color: var(--danger); }
 .cron-actions { display: inline-flex; gap: 4px; white-space: nowrap; }
-.cron-actions .btn-ghost { padding: 4px 6px; border-radius: var(--r-sm); background: var(--panel); font: 500 10.5px var(--font-mono); }
+.cron-actions .btn-ghost { padding: 4px 5px; border-radius: var(--r-sm); background: var(--panel); font: 500 10.5px var(--font-mono); }
 .cron-actions .btn-ghost:disabled { cursor: wait; }
 
 @container (max-width: 560px) {

web/test/cronSettings.test.mjs

@@ -17,7 +17,7 @@ const stub = path.join(tmp, 'api-stub.ts');
 fs.writeFileSync(stub, `
 export * from ${JSON.stringify(path.join(WEB, 'src/api.ts'))};
 let jobs = [{
-  id: 'cron_one', name: 'morning check', agent: { name: 'triage', cli: 'codex' }, prompt: 'Check.',
+  id: 'cron_one', name: 'morning check with a deliberately long job name', agent: { name: 'triage agent with a deliberately long name', cli: 'codex' }, prompt: 'Check.',
   schedule: { cron: '0 9 * * *', tz: 'Europe/Zurich' }, runOnRestart: true,
   state: 'running', createdAt: '2026-08-19T00:00:00Z', updatedAt: '2026-08-19T00:00:00Z',
   next: '2026-08-20T07:00:00Z', last: { at: '2026-08-19T07:00:00Z', status: 'ok', durationMs: 258 },
@@ -114,10 +114,38 @@ try {
   assert.equal(compactRow.noWrap, true, 'every retained column is pinned to one line');
   assert.equal(compactRow.typeText, '', 'type column is icon-only');
   assert.equal(compactRow.interval, 'every day 09:00', 'interval omits timezone and restart detail');
-  assert.match(compactRow.last, /^ok 258ms · 19 Aug 09:00$/, 'last run uses the dense date');
+  assert.match(compactRow.last, /^ok · 19 Aug 09:00$/, 'last run keeps the complete dense date');
   assert.equal(compactRow.buttonsFit, true, 'action labels are not clipped');
   assert.deepEqual(compactRow.buttonBorders, ['solid', 'solid', 'solid'], 'actions use button controls, not text links');
 
+  const widths = [];
+  for (const width of [1200, 980, 760, 390]) {
+    await page.setViewportSize({ width, height: 900 });
+    widths.push(await firstRow.evaluate((row) => {
+      const wrap = row.closest('.cron-table-wrap');
+      const cells = [...row.querySelectorAll('td')];
+      const buttons = [...row.querySelectorAll('button')];
+      return {
+        width: window.innerWidth,
+        overflow: wrap.scrollWidth - wrap.clientWidth,
+        clipped: cells.map((cell) => cell.scrollWidth > cell.clientWidth),
+        actionFits: buttons.every((button) => button.scrollWidth <= button.clientWidth)
+          && cells[7].scrollWidth <= cells[7].clientWidth,
+      };
+    }));
+  }
+  for (const layout of widths.slice(0, 2)) {
+    assert.equal(layout.overflow, 0, `${layout.width}px viewport needs no table scrollbar`);
+  }
+  for (const layout of widths) {
+    assert.deepEqual(layout.clipped.slice(2), [false, false, false, false, false, false],
+      `${layout.width}px keeps every bounded column intact`);
+    assert.equal(layout.actionFits, true, `${layout.width}px keeps every action usable`);
+  }
+  assert.equal(widths.at(-1).overflow > 0, true, 'the genuinely narrow table owns its overflow');
+  assert.equal(widths.at(-1).clipped.slice(0, 2).some(Boolean), true,
+    'at the narrow limit a name gives before a bounded column or action');
+
   await page.getByLabel('Job name', { exact: true }).fill('weekday digest');
   await page.getByLabel('Agent name', { exact: true }).fill('digest-agent');
   await page.getByLabel('Prompt', { exact: true }).fill('Summarize yesterday.');
@@ -136,8 +164,8 @@ try {
   const row = page.locator('.cron-table tbody tr').filter({ hasText: 'morning check' });
   await row.click();
   await page.getByRole('button', { name: 'Update job' }).waitFor();
-  assert.equal(await page.getByLabel('Job name', { exact: true }).inputValue(), 'morning check');
-  assert.equal(await page.getByLabel('Agent name', { exact: true }).inputValue(), 'triage');
+  assert.equal(await page.getByLabel('Job name', { exact: true }).inputValue(), 'morning check with a deliberately long job name');
+  assert.equal(await page.getByLabel('Agent name', { exact: true }).inputValue(), 'triage agent with a deliberately long name');
   assert.equal(await page.getByLabel('Prompt', { exact: true }).inputValue(), 'Check.');
   assert.equal(await page.locator('input[type="time"]').inputValue(), '09:00');
   assert.equal(await page.getByLabel('timezone').inputValue(), 'Europe/Zurich');
@@ -157,7 +185,7 @@ try {
   await page.waitForFunction(() => window.__cronCalls.some((call) => call[0] === 'update' && call[2].prompt));
   const edited = await page.evaluate(() => window.__cronCalls.find((call) => call[0] === 'update' && call[2].prompt));
   assert.deepEqual(edited, ['update', 'cron_one', {
-    name: 'morning check', agent: { name: 'triage', cli: 'codex' }, prompt: 'Check and summarize.',
+    name: 'morning check with a deliberately long job name', agent: { name: 'triage agent with a deliberately long name', cli: 'codex' }, prompt: 'Check and summarize.',
     schedule: { cron: '15 10 * * 4', tz: 'Asia/Tokyo' }, runOnRestart: false,
   }], 'row selection round-trips every persisted field through PUT');
   assert.equal(await page.getByRole('button', { name: 'Create job' }).isVisible(), true, 'successful update returns the form to create mode');