fix(ui): responsive layout, focus states, table overflow (reviewed external-agent change)

Reviewed and validated a UI pass made via a second AI tool (Codex):
- Responsive breakpoints (820px/460px): stacked layout, full-width sidebar,
grid stat cards, stacked run controls, min-width tables with scroll wrap
- :focus-visible outlines on all controls (accessibility, WCAG keyboard nav)
- Table overflow wrappers + overflow-wrap for long corpus texts
- Inline styles moved to classes (results-toolbar, language-control)

Governance fixes from review:
- AGENTS.md was a full duplicate of CLAUDE.md -> now a symlink (single
source of truth; prevents instruction drift between AI tools)
- .codex/ and .agents/ (machine-local tool state) gitignored
- Frontend rebuilt from source; output hashes match committed bundle exactly

Validation: 32/32 backend tests, both registry validators green, CSS balanced.

.gitignore

@@ -12,3 +12,7 @@ node_modules/
 
 # os
 .DS_Store
+
+# local AI-tool state (machine-specific)
+.codex/
+.agents/

AGENTS.md

@@ -0,0 +1 @@
+CLAUDE.md

CHANGELOG.md

@@ -4,6 +4,10 @@ Format: [Keep a Changelog](https://keepachangelog.com/). User-visible changes on
 
 ## [Unreleased]
 
+### Fixed
+- Improved dashboard responsive layout, focus states, and table overflow handling on
+  narrow screens.
+
 ### Added
 - Repository initialized from the public demo (v0.1 feature set: projects, tolerant CSV/XLSX
   ingestion, seeded constructs, MiniLM/mpnet/multilingual models, async runs with progress,

backend/static/assets/index-CPF9wqlU.css

@@ -0,0 +1 @@
+:root{--maroon: #7a1f3d;--maroon-dark: #5e1730;--ink: #1d2129;--muted: #667085;--line: #e5e7eb;--bg: #f7f7f8;--card: #ffffff;--ok: #157f3d;--err: #b42318;--accent-soft: #f6ebef}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh}.header{background:var(--maroon);color:#fff;padding:14px 28px;display:flex;align-items:baseline;flex-wrap:wrap;gap:14px}.header h1{flex:0 0 auto;font-size:17px;margin:0;font-weight:650;letter-spacing:.2px;white-space:nowrap}.header .sub{flex:1 1 280px;min-width:0;font-size:12.5px;opacity:.85}.layout{display:flex;flex:1;min-width:0;min-height:0}.sidebar{width:250px;background:var(--card);border-right:1px solid var(--line);padding:18px 14px;flex-shrink:0}.sidebar h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px 4px;display:flex;align-items:center;gap:8px}.sidebar h2 .count{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:10.5px;letter-spacing:0;color:var(--muted)}.sidebar-filter{width:100%;padding:7px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}.sidebar-filter:focus{outline:none;border-color:var(--maroon)}.project-list{max-height:calc(100vh - 210px);overflow-y:auto;margin:0 -4px;padding:0 4px}.project-item{display:block;width:100%;text-align:left;padding:9px 12px;margin-bottom:4px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;font:inherit;color:var(--ink)}.project-item:hover{background:var(--bg)}.project-item.active{background:var(--accent-soft);border-color:var(--maroon);font-weight:600}.project-item .date{display:block;font-size:11.5px;color:var(--muted);font-weight:400}.main{flex:1;padding:22px 28px;overflow-y:auto;min-width:0}.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin-bottom:16px}.card h3{margin:0 0 4px;font-size:15px}.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}.step-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--maroon);color:#fff;font-size:12px;font-weight:700;margin-right:8px;vertical-align:-3px}button{white-space:nowrap}button.primary{background:var(--maroon);color:#fff;border:none;padding:9px 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}button.primary:hover{background:var(--maroon-dark)}button.primary:disabled{background:#c9ccd1;cursor:not-allowed}button.ghost{background:none;border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:8px;font:inherit;cursor:pointer}button.ghost:hover{border-color:var(--maroon);color:var(--maroon)}button.linkish{background:none;border:none;color:var(--maroon);font:inherit;cursor:pointer;padding:0;text-decoration:underline}input[type=text],textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(122,31,61,.38);outline-offset:2px}input[type=file]{display:block;max-width:100%;margin-top:6px;font-size:13px;color:var(--muted)}input[type=file]::file-selector-button{background:#fff;border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;margin-right:10px}input[type=file]::file-selector-button:hover{border-color:var(--maroon);color:var(--maroon)}.row>button{align-self:flex-end;margin-bottom:1px}textarea{resize:vertical}label.field{display:block;margin-bottom:10px;font-size:13px;font-weight:600}label.field>*{margin-top:4px;font-weight:400}.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{min-width:0}.row>.grow{flex:1;min-width:min(220px,100%)}.language-control{min-width:170px}.results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}.result-actions{justify-content:flex-end}.result-actions a{display:inline-flex;text-decoration:none}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600}.pill.completed{background:#e6f4ea;color:var(--ok)}.pill.running{background:#fff3e0;color:#b45309}.pill.queued{background:#eef2f7;color:var(--muted)}.pill.failed{background:#fdecea;color:var(--err)}.progress-track{background:var(--line);border-radius:999px;height:7px;overflow:hidden}.progress-fill{background:var(--maroon);height:100%;transition:width .4s ease}.warnings{background:#fff8e6;border:1px solid #f2dfa8;color:#7a5b00;border-radius:8px;padding:10px 14px}.error-banner{background:#fdecea;color:var(--err);border:1px solid #f5c6c0;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}.table-wrap{width:100%;overflow-x:auto}table.docs{width:100%;border-collapse:collapse;font-size:13px}table.docs th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line)}table.docs td{padding:7px 8px;border-bottom:1px solid var(--bg);vertical-align:top;overflow-wrap:anywhere}table.docs td.score{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}.stat-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}.stat{flex:1;min-width:110px;background:var(--bg);border-radius:8px;padding:10px 14px}.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.item-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}.item-bar-label{flex:1;font-size:12.5px;min-width:0;overflow-wrap:anywhere}.item-bar-track{flex:1.2;background:var(--bg);border-radius:999px;height:10px}.item-bar-fill{background:var(--maroon);opacity:.85;height:100%;border-radius:999px}.item-bar-val{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}.construct-items{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:12.5px}.construct-items li{margin-bottom:2px}.meta-footer{font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;padding:10px 14px;margin-top:14px;font-variant-numeric:tabular-nums}.meta-footer code{font-size:11.5px}.muted{color:var(--muted)}.small{font-size:12.5px}.mt{margin-top:12px}@media (max-width: 820px){body{font-size:14px}.header{padding:12px 16px;align-items:flex-start;gap:2px 12px}.header h1{font-size:16px}.header .sub{flex:1 1 210px;font-size:12px;line-height:1.35}.layout{display:block}.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:14px}.project-list{max-height:220px;margin-right:0}.main{width:100%;padding:16px 14px 28px;overflow:visible}.card{padding:16px;margin-bottom:14px}.row,.results-toolbar,.result-actions{flex-direction:column;align-items:stretch;gap:10px}.row>.grow,.language-control{width:100%;min-width:0}.main .row>button,.main .row>a,.main .row>a>button,.results-toolbar>button{align-self:stretch;margin-bottom:0;width:100%}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-width:0}.item-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:6px 10px}.item-bar-track{grid-column:1 / -1;width:100%}.item-bar-val{width:auto}table.docs{min-width:520px}}@media (max-width: 460px){.header .sub{flex-basis:100%}.stat-grid{grid-template-columns:1fr}}

backend/static/assets/index-DPgajiM_.css

@@ -1 +0,0 @@
-:root{--maroon: #7a1f3d;--maroon-dark: #5e1730;--ink: #1d2129;--muted: #667085;--line: #e5e7eb;--bg: #f7f7f8;--card: #ffffff;--ok: #157f3d;--err: #b42318;--accent-soft: #f6ebef}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh}.header{background:var(--maroon);color:#fff;padding:14px 28px;display:flex;align-items:baseline;gap:14px}.header h1{font-size:17px;margin:0;font-weight:650;letter-spacing:.2px}.header .sub{font-size:12.5px;opacity:.85}.layout{display:flex;flex:1;min-height:0}.sidebar{width:250px;background:var(--card);border-right:1px solid var(--line);padding:18px 14px;flex-shrink:0}.sidebar h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px 4px;display:flex;align-items:center;gap:8px}.sidebar h2 .count{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:10.5px;letter-spacing:0;color:var(--muted)}.sidebar-filter{width:100%;padding:7px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}.sidebar-filter:focus{outline:none;border-color:var(--maroon)}.project-list{max-height:calc(100vh - 210px);overflow-y:auto;margin:0 -4px;padding:0 4px}.project-item{display:block;width:100%;text-align:left;padding:9px 12px;margin-bottom:4px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;font:inherit;color:var(--ink)}.project-item:hover{background:var(--bg)}.project-item.active{background:var(--accent-soft);border-color:var(--maroon);font-weight:600}.project-item .date{display:block;font-size:11.5px;color:var(--muted);font-weight:400}.main{flex:1;padding:22px 28px;overflow-y:auto;min-width:0}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:16px}.card h3{margin:0 0 4px;font-size:15px}.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}.step-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--maroon);color:#fff;font-size:12px;font-weight:700;margin-right:8px;vertical-align:-3px}button.primary{background:var(--maroon);color:#fff;border:none;padding:9px 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}button.primary:hover{background:var(--maroon-dark)}button.primary:disabled{background:#c9ccd1;cursor:not-allowed}button.ghost{background:none;border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:8px;font:inherit;cursor:pointer}button.ghost:hover{border-color:var(--maroon);color:var(--maroon)}button.linkish{background:none;border:none;color:var(--maroon);font:inherit;cursor:pointer;padding:0;text-decoration:underline}input[type=text],textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}input[type=file]{display:block;margin-top:6px;font-size:13px;color:var(--muted)}input[type=file]::file-selector-button{background:#fff;border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;margin-right:10px}input[type=file]::file-selector-button:hover{border-color:var(--maroon);color:var(--maroon)}.row>button{align-self:flex-end;margin-bottom:1px}textarea{resize:vertical}label.field{display:block;margin-bottom:10px;font-size:13px;font-weight:600}label.field>*{margin-top:4px;font-weight:400}.row{display:flex;gap:14px;flex-wrap:wrap}.row>.grow{flex:1;min-width:220px}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600}.pill.completed{background:#e6f4ea;color:var(--ok)}.pill.running{background:#fff3e0;color:#b45309}.pill.queued{background:#eef2f7;color:var(--muted)}.pill.failed{background:#fdecea;color:var(--err)}.progress-track{background:var(--line);border-radius:999px;height:7px;overflow:hidden}.progress-fill{background:var(--maroon);height:100%;transition:width .4s ease}.warnings{background:#fff8e6;border:1px solid #f2dfa8;color:#7a5b00;border-radius:8px;padding:10px 14px}.error-banner{background:#fdecea;color:var(--err);border:1px solid #f5c6c0;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}table.docs{width:100%;border-collapse:collapse;font-size:13px}table.docs th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line)}table.docs td{padding:7px 8px;border-bottom:1px solid var(--bg);vertical-align:top}table.docs td.score{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}.stat-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}.stat{flex:1;min-width:110px;background:var(--bg);border-radius:8px;padding:10px 14px}.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.item-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}.item-bar-label{flex:1;font-size:12.5px;min-width:0}.item-bar-track{flex:1.2;background:var(--bg);border-radius:999px;height:10px}.item-bar-fill{background:var(--maroon);opacity:.85;height:100%;border-radius:999px}.item-bar-val{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}.construct-items{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:12.5px}.construct-items li{margin-bottom:2px}.meta-footer{font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;padding:10px 14px;margin-top:14px;font-variant-numeric:tabular-nums}.meta-footer code{font-size:11.5px}.muted{color:var(--muted)}.small{font-size:12.5px}.mt{margin-top:12px}

backend/static/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CCR Platform — Contextualized Construct Representations</title>
-    <script type="module" crossorigin src="/assets/index-DOnuuYyH.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DPgajiM_.css">
+    <script type="module" crossorigin src="/assets/index-gF2iJ3kV.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CPF9wqlU.css">
   </head>
   <body>
     <div id="root"></div>

frontend/src/ResultsView.jsx

@@ -25,11 +25,11 @@ export default function ResultsView({ jobId, onBack }) {
 
   return (
     <>
-      <div className="row" style={{ justifyContent: "space-between", marginBottom: 14 }}>
+      <div className="results-toolbar">
         <button className="ghost" onClick={onBack}>
           ← Back to workspace
         </button>
-        <div className="row">
+        <div className="row result-actions">
           <a href={api.exportUrl(jobId)}>
             <button className="primary">Export results CSV</button>
           </a>
@@ -148,22 +148,24 @@ function Stat({ k, v }) {
 
 function DocTable({ docs }) {
   return (
-    <table className="docs">
-      <thead>
-        <tr>
-          <th style={{ width: 60 }}>Score</th>
-          <th>Text</th>
-        </tr>
-      </thead>
-      <tbody>
-        {docs.map((d) => (
-          <tr key={d.row}>
-            <td className="score">{d.score.toFixed(3)}</td>
-            <td>{d.text}</td>
+    <div className="table-wrap">
+      <table className="docs">
+        <thead>
+          <tr>
+            <th style={{ width: 60 }}>Score</th>
+            <th>Text</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {docs.map((d) => (
+            <tr key={d.row}>
+              <td className="score">{d.score.toFixed(3)}</td>
+              <td>{d.text}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
 

frontend/src/Workspace.jsx

@@ -243,7 +243,7 @@ export default function Workspace({ project }) {
           model doesn't support it, you'll get a warning — never a silent result.
         </p>
         <div className="row">
-          <div style={{ minWidth: 170 }}>
+          <div className="language-control">
             <label className="field">
               Text language
               <select value={language} onChange={(e) => setLanguage(e.target.value)}>
@@ -282,50 +282,54 @@ export default function Workspace({ project }) {
       {jobs.length > 0 && (
         <div className="card">
           <h3>Runs</h3>
-          <table className="docs">
-            <thead>
-              <tr>
-                <th>Started</th>
-                <th>Corpus</th>
-                <th>Construct</th>
-                <th style={{ width: "24%" }}>Status</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {jobs.map((j) => (
-                <tr key={j.id}>
-                  <td className="muted">{(j.started_at || j.created_at).replace("T", " ").slice(0, 16)}</td>
-                  <td>{j.corpus_filename}</td>
-                  <td>{j.construct_name}</td>
-                  <td>
-                    {j.status === "running" ? (
-                      <div className="progress-track" title={`${Math.round(j.progress * 100)}%`}>
-                        <div
-                          className="progress-fill"
-                          style={{ width: `${Math.max(3, j.progress * 100)}%` }}
-                        />
-                      </div>
-                    ) : (
-                      <span className={`pill ${j.status}`}>{j.status}</span>
-                    )}
-                    {j.status === "failed" && (
-                      <div className="small muted" title={j.error}>
-                        {j.error.split("\n").pop()}
-                      </div>
-                    )}
-                  </td>
-                  <td>
-                    {j.status === "completed" && (
-                      <button className="linkish" onClick={() => setViewJobId(j.id)}>
-                        View results
-                      </button>
-                    )}
-                  </td>
+          <div className="table-wrap">
+            <table className="docs">
+              <thead>
+                <tr>
+                  <th>Started</th>
+                  <th>Corpus</th>
+                  <th>Construct</th>
+                  <th style={{ width: "24%" }}>Status</th>
+                  <th />
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {jobs.map((j) => (
+                  <tr key={j.id}>
+                    <td className="muted">
+                      {(j.started_at || j.created_at).replace("T", " ").slice(0, 16)}
+                    </td>
+                    <td>{j.corpus_filename}</td>
+                    <td>{j.construct_name}</td>
+                    <td>
+                      {j.status === "running" ? (
+                        <div className="progress-track" title={`${Math.round(j.progress * 100)}%`}>
+                          <div
+                            className="progress-fill"
+                            style={{ width: `${Math.max(3, j.progress * 100)}%` }}
+                          />
+                        </div>
+                      ) : (
+                        <span className={`pill ${j.status}`}>{j.status}</span>
+                      )}
+                      {j.status === "failed" && (
+                        <div className="small muted" title={j.error}>
+                          {j.error.split("\n").pop()}
+                        </div>
+                      )}
+                    </td>
+                    <td>
+                      {j.status === "completed" && (
+                        <button className="linkish" onClick={() => setViewJobId(j.id)}>
+                          View results
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
       )}
     </>

frontend/src/styles.css

@@ -31,12 +31,20 @@ body {
   padding: 14px 28px;
   display: flex;
   align-items: baseline;
+  flex-wrap: wrap;
   gap: 14px;
 }
-.header h1 { font-size: 17px; margin: 0; font-weight: 650; letter-spacing: 0.2px; }
-.header .sub { font-size: 12.5px; opacity: 0.85; }
+.header h1 {
+  flex: 0 0 auto;
+  font-size: 17px;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+.header .sub { flex: 1 1 280px; min-width: 0; font-size: 12.5px; opacity: 0.85; }
 
-.layout { display: flex; flex: 1; min-height: 0; }
+.layout { display: flex; flex: 1; min-width: 0; min-height: 0; }
 
 /* ---------- sidebar ---------- */
 .sidebar {
@@ -79,7 +87,7 @@ body {
 
 .card {
   background: var(--card); border: 1px solid var(--line);
-  border-radius: 10px; padding: 18px 20px; margin-bottom: 16px;
+  border-radius: 8px; padding: 18px 20px; margin-bottom: 16px;
 }
 .card h3 { margin: 0 0 4px; font-size: 15px; }
 .card .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
@@ -92,6 +100,8 @@ body {
 }
 
 /* ---------- controls ---------- */
+button { white-space: nowrap; }
+
 button.primary {
   background: var(--maroon); color: #fff; border: none;
   padding: 9px 18px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
@@ -113,10 +123,18 @@ input[type="text"], textarea, select {
   border-radius: 8px; font: inherit; background: #fff; color: var(--ink);
 }
 
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid rgba(122, 31, 61, 0.38);
+  outline-offset: 2px;
+}
+
 /* File input: block-level with breathing room under its label, and a styled
    picker button so it matches the rest of the controls. */
 input[type="file"] {
-  display: block; margin-top: 6px; font-size: 13px; color: var(--muted);
+  display: block; max-width: 100%; margin-top: 6px; font-size: 13px; color: var(--muted);
 }
 input[type="file"]::file-selector-button {
   background: #fff; border: 1px solid var(--line); color: var(--ink);
@@ -135,7 +153,19 @@ label.field { display: block; margin-bottom: 10px; font-size: 13px; font-weight:
 label.field > * { margin-top: 4px; font-weight: 400; }
 
 .row { display: flex; gap: 14px; flex-wrap: wrap; }
-.row > .grow { flex: 1; min-width: 220px; }
+.row > * { min-width: 0; }
+.row > .grow { flex: 1; min-width: min(220px, 100%); }
+.language-control { min-width: 170px; }
+.results-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+.result-actions { justify-content: flex-end; }
+.result-actions a { display: inline-flex; text-decoration: none; }
 
 /* ---------- misc ---------- */
 .pill {
@@ -160,12 +190,16 @@ label.field > * { margin-top: 4px; font-weight: 400; }
   padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px;
 }
 
+.table-wrap { width: 100%; overflow-x: auto; }
 table.docs { width: 100%; border-collapse: collapse; font-size: 13px; }
 table.docs th {
   text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase;
   letter-spacing: 0.5px; padding: 6px 8px; border-bottom: 1px solid var(--line);
 }
-table.docs td { padding: 7px 8px; border-bottom: 1px solid var(--bg); vertical-align: top; }
+table.docs td {
+  padding: 7px 8px; border-bottom: 1px solid var(--bg); vertical-align: top;
+  overflow-wrap: anywhere;
+}
 table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
 
 .stat-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
@@ -177,7 +211,7 @@ table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; whit
 .stat .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
 
 .item-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
-.item-bar-label { flex: 1; font-size: 12.5px; min-width: 0; }
+.item-bar-label { flex: 1; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
 .item-bar-track { flex: 1.2; background: var(--bg); border-radius: 999px; height: 10px; }
 .item-bar-fill { background: var(--maroon); opacity: 0.85; height: 100%; border-radius: 999px; }
 .item-bar-val { width: 52px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; }
@@ -195,3 +229,77 @@ table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; whit
 .muted { color: var(--muted); }
 .small { font-size: 12.5px; }
 .mt { margin-top: 12px; }
+
+@media (max-width: 820px) {
+  body { font-size: 14px; }
+
+  .header {
+    padding: 12px 16px;
+    align-items: flex-start;
+    gap: 2px 12px;
+  }
+  .header h1 { font-size: 16px; }
+  .header .sub {
+    flex: 1 1 210px;
+    font-size: 12px;
+    line-height: 1.35;
+  }
+
+  .layout { display: block; }
+  .sidebar {
+    width: 100%;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    padding: 14px;
+  }
+  .project-list {
+    max-height: 220px;
+    margin-right: 0;
+  }
+  .main {
+    width: 100%;
+    padding: 16px 14px 28px;
+    overflow: visible;
+  }
+  .card {
+    padding: 16px;
+    margin-bottom: 14px;
+  }
+
+  .row,
+  .results-toolbar,
+  .result-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .row > .grow,
+  .language-control {
+    width: 100%;
+    min-width: 0;
+  }
+  .main .row > button,
+  .main .row > a,
+  .main .row > a > button,
+  .results-toolbar > button {
+    align-self: stretch;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .stat { min-width: 0; }
+  .item-bar-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 56px;
+    gap: 6px 10px;
+  }
+  .item-bar-track { grid-column: 1 / -1; width: 100%; }
+  .item-bar-val { width: auto; }
+  table.docs { min-width: 520px; }
+}
+
+@media (max-width: 460px) {
+  .header .sub { flex-basis: 100%; }
+  .stat-grid { grid-template-columns: 1fr; }
+}