From 1d609cf55255603c11a5f7c496f5b581b19a387f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 5 May 2026 06:20:05 +0000
Subject: [PATCH] fix(web): responsive header/runs/turn layout for narrow
 viewports (BEN-52)

* App header now wraps and uses smaller padding below the sm breakpoint;
  the long run-id span truncates instead of forcing the row wider.
* Runs grid is wrapped in an overflow-x-auto container with a 56rem
  min-width inner section, so on phones the table scrolls horizontally
  inside the wrapper rather than pushing the page wider than the
  viewport.
* Turn-content and rendered-prompt <pre> blocks add break-words so long
  unbreakable strings (URLs, tokens) wrap inside the card instead of
  triggering a horizontal scrollbar.

https://claude.ai/code/session_01P3fhTuAWNTQX1nUrLyDDHo
---
 src/web/App.tsx       |  14 +++---
 src/web/Dashboard.tsx | 105 ++++++++++++++++++++++--------------------
 src/web/RunDetail.tsx |   4 +-
 3 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/src/web/App.tsx b/src/web/App.tsx
index daac30d..0656706 100644
--- a/src/web/App.tsx
+++ b/src/web/App.tsx
@@ -32,17 +32,17 @@ export function App() {
 
   return (
     <div className="min-h-screen">
-      <header className="border-b border-slate-800 px-6 py-4 flex items-center gap-4">
+      <header className="border-b border-slate-800 px-4 py-3 sm:px-6 sm:py-4 flex flex-wrap items-center gap-x-4 gap-y-2">
         <a
           href="#/"
           className="text-lg font-semibold tracking-tight hover:text-cyan-400 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500"
         >
           Symphony
         </a>
-        <nav className="flex items-center gap-3 text-sm text-slate-400">
+        <nav className="flex items-center gap-1 text-sm text-slate-400">
           <a
             href="#/"
-            className={`rounded px-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 ${
+            className={`rounded px-2 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 ${
               route.view === "dashboard" ? "text-slate-100" : "hover:text-slate-200"
             }`}
           >
@@ -50,7 +50,7 @@ export function App() {
           </a>
           <a
             href="#/search"
-            className={`rounded px-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 ${
+            className={`rounded px-2 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 ${
               route.view === "search" ? "text-slate-100" : "hover:text-slate-200"
             }`}
           >
@@ -58,10 +58,12 @@ export function App() {
           </a>
         </nav>
         {route.view === "run" && (
-          <span className="text-sm text-slate-500">run {route.runId.slice(0, 8)}…</span>
+          <span className="min-w-0 max-w-full truncate text-sm text-slate-500">
+            run {route.runId.slice(0, 8)}…
+          </span>
         )}
       </header>
-      <main className="px-6 py-6">
+      <main className="px-4 py-4 sm:px-6 sm:py-6">
         {route.view === "dashboard" && <Dashboard />}
         {route.view === "run" && <RunDetail runId={route.runId} />}
         {route.view === "search" && <Search query={route.query} />}
diff --git a/src/web/Dashboard.tsx b/src/web/Dashboard.tsx
index f22b71c..8c4f37d 100644
--- a/src/web/Dashboard.tsx
+++ b/src/web/Dashboard.tsx
@@ -153,57 +153,64 @@ function EmptyState() {
 
 function RunsTable({ runs }: { runs: ApiRun[] }) {
   return (
-    <section aria-labelledby="runs-heading" className="text-sm">
-      <h2 id="runs-heading" className="sr-only">
-        Runs
-      </h2>
-      <div
-        role="presentation"
-        className="grid grid-cols-[6rem_minmax(0,1fr)_5rem_8rem_4rem_5rem_5rem_minmax(8rem,max-content)_minmax(8rem,max-content)] gap-x-4 px-2 py-2 text-left text-slate-400 border-b border-slate-800"
+    <div className="-mx-4 overflow-x-auto sm:mx-0">
+      <section
+        aria-labelledby="runs-heading"
+        className="min-w-[56rem] px-4 text-sm sm:min-w-0 sm:px-0"
       >
-        <span>Issue</span>
-        <span>Title</span>
-        <span>Status</span>
-        <span>Scenario</span>
-        <span>Turns</span>
-        <span>Tokens</span>
-        <span>Cost</span>
-        <span>Started</span>
-        <span>Finished</span>
-      </div>
-      <ul className="divide-y divide-slate-900/60">
-        {runs.map((r) => (
-          <li key={r.id}>
-            <a
-              href={`#/runs/${r.id}`}
-              aria-label={`Open run ${r.issueIdentifier}${r.issueTitle ? `: ${r.issueTitle}` : ""}`}
-              className="grid grid-cols-[6rem_minmax(0,1fr)_5rem_8rem_4rem_5rem_5rem_minmax(8rem,max-content)_minmax(8rem,max-content)] gap-x-4 items-center px-2 py-2 hover:bg-slate-900/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-inset"
-            >
-              <span className="font-mono">{r.issueIdentifier}</span>
-              <span className="text-slate-200 truncate" title={r.issueTitle ?? "—"}>
-                {r.issueTitle ?? "—"}
-              </span>
-              <span>
-                <StatusBadge status={r.status} />
-              </span>
-              <span className="text-slate-400 truncate">{r.scenario ?? "—"}</span>
-              <span className="text-slate-400 font-mono tabular-nums">{r.turnCount}</span>
-              <span
-                className="text-slate-400 font-mono tabular-nums"
-                title={formatTokenBreakdown(r)}
+        <h2 id="runs-heading" className="sr-only">
+          Runs
+        </h2>
+        <div
+          role="presentation"
+          className="grid grid-cols-[6rem_minmax(0,1fr)_5rem_8rem_4rem_5rem_5rem_minmax(8rem,max-content)_minmax(8rem,max-content)] gap-x-4 px-2 py-2 text-left text-slate-400 border-b border-slate-800"
+        >
+          <span>Issue</span>
+          <span>Title</span>
+          <span>Status</span>
+          <span>Scenario</span>
+          <span>Turns</span>
+          <span>Tokens</span>
+          <span>Cost</span>
+          <span>Started</span>
+          <span>Finished</span>
+        </div>
+        <ul className="divide-y divide-slate-900/60">
+          {runs.map((r) => (
+            <li key={r.id}>
+              <a
+                href={`#/runs/${r.id}`}
+                aria-label={`Open run ${r.issueIdentifier}${r.issueTitle ? `: ${r.issueTitle}` : ""}`}
+                className="grid grid-cols-[6rem_minmax(0,1fr)_5rem_8rem_4rem_5rem_5rem_minmax(8rem,max-content)_minmax(8rem,max-content)] gap-x-4 items-center px-2 py-2 hover:bg-slate-900/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-inset"
               >
-                {formatTokenTotal(r)}
-              </span>
-              <span className="text-slate-400 font-mono tabular-nums">
-                {formatCost(r.totalCostUsd)}
-              </span>
-              <span className="text-slate-400">{formatTs(r.startedAt)}</span>
-              <span className="text-slate-400">{r.finishedAt ? formatTs(r.finishedAt) : "—"}</span>
-            </a>
-          </li>
-        ))}
-      </ul>
-    </section>
+                <span className="font-mono">{r.issueIdentifier}</span>
+                <span className="text-slate-200 truncate" title={r.issueTitle ?? "—"}>
+                  {r.issueTitle ?? "—"}
+                </span>
+                <span>
+                  <StatusBadge status={r.status} />
+                </span>
+                <span className="text-slate-400 truncate">{r.scenario ?? "—"}</span>
+                <span className="text-slate-400 font-mono tabular-nums">{r.turnCount}</span>
+                <span
+                  className="text-slate-400 font-mono tabular-nums"
+                  title={formatTokenBreakdown(r)}
+                >
+                  {formatTokenTotal(r)}
+                </span>
+                <span className="text-slate-400 font-mono tabular-nums">
+                  {formatCost(r.totalCostUsd)}
+                </span>
+                <span className="text-slate-400">{formatTs(r.startedAt)}</span>
+                <span className="text-slate-400">
+                  {r.finishedAt ? formatTs(r.finishedAt) : "—"}
+                </span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
   );
 }
 
diff --git a/src/web/RunDetail.tsx b/src/web/RunDetail.tsx
index 8ea575a..f1e9eea 100644
--- a/src/web/RunDetail.tsx
+++ b/src/web/RunDetail.tsx
@@ -200,7 +200,7 @@ function TurnCard({ turn }: { turn: ApiTurn }) {
           </span>
         )}
       </div>
-      <pre className="mt-2 whitespace-pre-wrap text-sm text-slate-200">
+      <pre className="mt-2 whitespace-pre-wrap break-words text-sm text-slate-200">
         {showCollapsed && summary ? summary.head : turn.content}
       </pre>
       {collapsible && (
@@ -227,7 +227,7 @@ function TurnCard({ turn }: { turn: ApiTurn }) {
             </span>
             Rendered prompt the model saw
           </summary>
-          <pre className="mt-2 whitespace-pre-wrap text-slate-500 border-l border-slate-800 pl-3">
+          <pre className="mt-2 whitespace-pre-wrap break-words text-slate-500 border-l border-slate-800 pl-3">
             {turn.renderedPrompt}
           </pre>
         </details>