diff --git a/ui/client/src/components/LogEntryLine.module.css b/ui/client/src/components/LogEntryLine.module.css
index 1e161cc..1e1916c 100644
--- a/ui/client/src/components/LogEntryLine.module.css
+++ b/ui/client/src/components/LogEntryLine.module.css
@@ -7,3 +7,9 @@
 .expandable { cursor: pointer; }
 .expandable:hover { color: var(--text-primary); }
 .expandHint { color: var(--text-muted); font-size: 10px; }
+
+@media (max-width: 768px) {
+  .line { gap: 6px; font-size: 12px; }
+  .event { min-width: 60px; font-size: 11px; }
+  .ts { font-size: 11px; }
+}
diff --git a/ui/client/src/components/NodeDetail.module.css b/ui/client/src/components/NodeDetail.module.css
index 74d1f61..a6ff68c 100644
--- a/ui/client/src/components/NodeDetail.module.css
+++ b/ui/client/src/components/NodeDetail.module.css
@@ -320,3 +320,48 @@ details[open] > summary.sectionLabel { margin-bottom: 6px; }
 .runStatus.error { background: rgba(203,36,49,0.12); color: var(--red); }
 .runMeta { color: var(--text-muted); font-size: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
 .runHint { color: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); margin-top: 2px; word-break: break-all; }
+
+@media (max-width: 768px) {
+  /* Keep the node id + close button visible while the user scrolls through
+     long Lean source / NL bodies on a small screen. */
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    padding: 12px 12px 8px;
+  }
+  .id { font-size: 14px; }
+
+  .section { padding: 10px 12px; }
+
+  /* Two-column flag grid keeps each cell wide enough to read on a 375px
+     viewport. */
+  .flagsGrid { grid-template-columns: repeat(2, 1fr); }
+
+  /* Stack the "Reviewing as" label + input vertically so the input gets the
+     full row width. */
+  .reviewerLabel {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+  }
+  /* font-size ≥ 16px on the actual <input>/<textarea> stops iOS Safari from
+     auto-zooming when it gains focus. The visual scale is virtually
+     identical to 14px on Android. */
+  .reviewerInput,
+  .reviewCommentBox { font-size: 16px; padding: 8px 10px; }
+
+  .reviewBtn {
+    width: 100%;
+    padding: 12px;
+    font-size: 14px;
+    min-height: 44px;
+  }
+
+  /* Cap the embedded scroll regions to roughly half the viewport so the
+     review form / comments stay reachable without scrolling past a frozen
+     content block. */
+  .rendered { max-height: 50vh; }
+  .leanSource { max-height: 50vh; font-size: 12px; }
+  .excerpt { max-height: 40vh; }
+}
diff --git a/ui/client/src/styles/global.css b/ui/client/src/styles/global.css
index f26f13e..4e8e533 100644
--- a/ui/client/src/styles/global.css
+++ b/ui/client/src/styles/global.css
@@ -1,4 +1,5 @@
 :root {
+  --header-height: 40px;
   --bg-primary: #ffffff;
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #f0f1f3;
@@ -72,3 +73,20 @@ select {
   font-size: 12px;
   font-family: var(--font-sans);
 }
+
+@media (max-width: 768px) {
+  body { font-size: 14px; }
+  .header {
+    gap: 8px;
+    padding: 8px 12px;
+    flex-wrap: wrap;
+  }
+  .header h1 { font-size: 13px; }
+  .header-nav { gap: 0; margin-left: auto; }
+  .nav-link { padding: 6px 8px; }
+  .main-content { padding: 12px; }
+}
+
+@media (max-width: 480px) {
+  .project-badge { display: none; }
+}
diff --git a/ui/client/src/views/LogViewer.module.css b/ui/client/src/views/LogViewer.module.css
index 2195d1a..b6dee5b 100644
--- a/ui/client/src/views/LogViewer.module.css
+++ b/ui/client/src/views/LogViewer.module.css
@@ -119,3 +119,64 @@
 .summaryText pre { background: var(--bg-tertiary); padding: 8px; border-radius: 4px; overflow-x: auto; font-size: 12px; margin: 4px 0; }
 
 .emptyContent { padding: 32px; text-align: center; color: var(--text-muted); font-size: 12px; }
+
+/* Mobile-only sidebar toggle. Hidden on desktop. */
+.mobileSidebarToggle { display: none; }
+.mobileBackdrop { display: none; border: none; padding: 0; }
+
+@media (max-width: 768px) {
+  .root {
+    height: 100%;
+    flex-direction: column;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    z-index: 20;
+    background: var(--bg-primary);
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
+    min-width: 0;
+  }
+  .sidebar.mobileSidebarOpen { transform: translateX(0); }
+
+  .mobileBackdrop {
+    display: block;
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.32);
+    z-index: 19;
+  }
+
+  .mobileSidebarToggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 10px;
+    font-size: 14px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .toolbar { padding: 6px 8px; gap: 6px; }
+  .selectedLabel {
+    max-width: 50vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .filterChip { padding: 4px 10px; font-size: 11px; }
+  .count { font-size: 10px; }
+}
diff --git a/ui/client/src/views/LogViewer.tsx b/ui/client/src/views/LogViewer.tsx
index 467f447..b94bce2 100644
--- a/ui/client/src/views/LogViewer.tsx
+++ b/ui/client/src/views/LogViewer.tsx
@@ -79,6 +79,9 @@ function RunSummaryBar({ entries }: { entries: LogEntry[] }) {
 export default function LogViewer() {
   const [selectedFile, setSelectedFile] = useState('');
   const [selectedFilters, setSelectedFilters] = useState<FilterEvent[]>(DEFAULT_FILTERS);
+  // Mobile-only: log-list sidebar collapses into a slide-in drawer behind a
+  // toggle button. Desktop CSS hides the toggle and keeps the sidebar fixed.
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const highlightRef = useRef<HTMLDivElement>(null);
 
   const { data: logsData } = useLogs();
@@ -152,14 +155,28 @@ export default function LogViewer() {
   const showSessionSummary = !!sessionEnd && selectedFilterSet.has('session_end');
   const selectedLabel = selectedFile.replace(/\.jsonl$/, '').replace(/\//g, ' / ');
 
+  // Wrap setSelectedFile so picking a log on mobile auto-closes the drawer.
+  const handleSelectFile = (path: string) => {
+    setSelectedFile(path);
+    setMobileSidebarOpen(false);
+  };
+
   return (
     <div className={styles.root}>
-      <div className={styles.sidebar}>
+      {mobileSidebarOpen && (
+        <button
+          type="button"
+          className={styles.mobileBackdrop}
+          onClick={() => setMobileSidebarOpen(false)}
+          aria-label="Close log list"
+        />
+      )}
+      <div className={`${styles.sidebar} ${mobileSidebarOpen ? styles.mobileSidebarOpen : ''}`}>
         {Array.from(agentGroups.entries()).map(([agentName, groups]) => (
           <div key={agentName} className={styles.agentSection}>
             <div className={styles.agentHeader}>{agentName}</div>
             {groups.map(g => (
-              <RunGroup key={g.id} group={g} selectedFile={selectedFile} onSelect={setSelectedFile} />
+              <RunGroup key={g.id} group={g} selectedFile={selectedFile} onSelect={handleSelectFile} />
             ))}
           </div>
         ))}
@@ -171,6 +188,15 @@ export default function LogViewer() {
 
       <div className={styles.main}>
         <div className={styles.toolbar}>
+          <button
+            type="button"
+            className={styles.mobileSidebarToggle}
+            onClick={() => setMobileSidebarOpen(v => !v)}
+            aria-expanded={mobileSidebarOpen}
+            aria-label="Toggle log list"
+          >
+            ☰
+          </button>
           <span className={styles.selectedLabel}>{selectedLabel || 'Select a log'}</span>
           <div className={styles.filterBar} aria-label="Event type filters">
             <span className={styles.filterLabel}>Show</span>
diff --git a/ui/client/src/views/Nodes.module.css b/ui/client/src/views/Nodes.module.css
index 2e053d5..e0c5508 100644
--- a/ui/client/src/views/Nodes.module.css
+++ b/ui/client/src/views/Nodes.module.css
@@ -182,3 +182,83 @@
 .drawerResize:active {
   background: rgba(3, 102, 214, 0.25);
 }
+
+/* Mobile-only filter toggle. Hidden on desktop where the sidebar is
+   permanently docked. */
+.mobileFilterToggle { display: none; }
+.mobileBackdrop { display: none; border: none; padding: 0; }
+
+@media (max-width: 768px) {
+  .root { grid-template-columns: 1fr; }
+
+  /* Sidebar transforms into an off-canvas drawer. Anchored below the app
+     header via --header-height. */
+  .sidebar {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    z-index: 20;
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
+  }
+  .sidebar.mobileSidebarOpen { transform: translateX(0); }
+
+  .mobileBackdrop {
+    display: block;
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.32);
+    z-index: 19;
+  }
+
+  .mobileFilterToggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 12;
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-primary);
+    cursor: pointer;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  }
+
+  /* Larger touch targets for filter chips. */
+  .chip { padding: 6px 12px; font-size: 12px; gap: 6px; }
+  .search { padding: 8px 10px; font-size: 14px; }
+
+  /* Detail drawer becomes a fixed fullscreen sheet — position:fixed is
+     relative to the visual viewport so it renders at 1x regardless of any
+     pinch-zoom the user applied to the graph canvas. */
+  .drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100% !important;
+    z-index: 30;
+  }
+  .drawerResize { display: none; }
+
+  .canvasOverlay {
+    font-size: 10px;
+    padding: 4px 8px;
+    bottom: 8px;
+    left: 8px;
+  }
+}
diff --git a/ui/client/src/views/Nodes.tsx b/ui/client/src/views/Nodes.tsx
index 5a2bc98..afd6031 100644
--- a/ui/client/src/views/Nodes.tsx
+++ b/ui/client/src/views/Nodes.tsx
@@ -26,6 +26,7 @@ export default function Nodes() {
   const navigate = useNavigate();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const panZoomRef = useRef<SvgPanZoom.Instance | null>(null);
+  const drawerRef = useRef<HTMLDivElement | null>(null);
   // navigate's reference may not be perfectly stable across renders (or
   // an upstream provider re-render); keep it behind a ref so the SVG mount
   // effect doesn't fire just because navigate's identity changed —
@@ -41,6 +42,10 @@ export default function Nodes() {
   const [activeChapters, setActiveChapters] = useState<Set<string>>(() => new Set());
   const [chaptersInit, setChaptersInit] = useState(false);
   const [drawerWidth, setDrawerWidth] = useState<number>(readSavedDrawerWidth);
+  // Mobile-only: filter sidebar collapses into a slide-in drawer behind a
+  // toggle button. Desktop CSS hides the toggle and keeps the sidebar
+  // statically docked, so this state has no visual effect there.
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 
   // Persist drawer width across page loads.
   useEffect(() => {
@@ -92,6 +97,55 @@ export default function Nodes() {
     if (next !== selectedId) setSelectedId(next);
   }, [routeId, selectedId]);
 
+  // Close mobile filter drawer whenever a node opens — the detail drawer
+  // takes the full screen on mobile and would otherwise overlap the open
+  // filter panel.
+  useEffect(() => {
+    if (selectedId) setMobileSidebarOpen(false);
+  }, [selectedId]);
+
+  // On mobile, the user may pinch-zoom the page to read node labels. When
+  // the drawer opens, counter-scale it so it renders at 1x regardless of
+  // the current browser zoom level.
+  useEffect(() => {
+    const el = drawerRef.current;
+    const vv = window.visualViewport;
+    if (!el || !vv || !selectedId) return;
+
+    const sync = () => {
+      const scale = vv.scale;
+      if (scale > 1.05) {
+        el.style.transform = `scale(${1 / scale})`;
+        el.style.transformOrigin = 'top left';
+        el.style.width = `${vv.width * scale}px`;
+        el.style.height = `${vv.height * scale}px`;
+        el.style.left = `${vv.offsetLeft}px`;
+        el.style.top = `${vv.offsetTop}px`;
+      } else {
+        el.style.transform = '';
+        el.style.transformOrigin = '';
+        el.style.width = '';
+        el.style.height = '';
+        el.style.left = '';
+        el.style.top = '';
+      }
+    };
+
+    sync();
+    vv.addEventListener('resize', sync);
+    vv.addEventListener('scroll', sync);
+    return () => {
+      vv.removeEventListener('resize', sync);
+      vv.removeEventListener('scroll', sync);
+      el.style.transform = '';
+      el.style.transformOrigin = '';
+      el.style.width = '';
+      el.style.height = '';
+      el.style.left = '';
+      el.style.top = '';
+    };
+  }, [selectedId]);
+
   // Chapter chips render in content.tex order (server returns them already
   // sorted). Don't re-sort here.
   const allChapters = graph?.chapters ?? [];
@@ -263,7 +317,26 @@ export default function Nodes() {
 
   return (
     <div className={`${styles.root} ${selectedId ? styles.drawerOpen : ''}`}>
-      <aside className={styles.sidebar}>
+      {!selectedId && (
+        <button
+          type="button"
+          className={styles.mobileFilterToggle}
+          onClick={() => setMobileSidebarOpen(v => !v)}
+          aria-expanded={mobileSidebarOpen}
+          aria-label="Toggle filters"
+        >
+          ☰ Filters
+        </button>
+      )}
+      {mobileSidebarOpen && (
+        <button
+          type="button"
+          className={styles.mobileBackdrop}
+          onClick={() => setMobileSidebarOpen(false)}
+          aria-label="Close filters"
+        />
+      )}
+      <aside className={`${styles.sidebar} ${mobileSidebarOpen ? styles.mobileSidebarOpen : ''}`}>
         <div className={styles.sidebarTitle}>Search</div>
         <input
           className={styles.search}
@@ -339,7 +412,7 @@ export default function Nodes() {
       </div>
 
       {selectedId && (
-        <div className={styles.drawer} style={{ width: drawerWidth }}>
+        <div className={styles.drawer} ref={drawerRef} style={{ width: drawerWidth }}>
           <div
             className={styles.drawerResize}
             onMouseDown={startDrawerResize}
diff --git a/ui/client/src/views/Overview.module.css b/ui/client/src/views/Overview.module.css
index 8933929..875e652 100644
--- a/ui/client/src/views/Overview.module.css
+++ b/ui/client/src/views/Overview.module.css
@@ -33,3 +33,56 @@
 .table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
 .table th { text-align: left; padding: 6px 8px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); }
 .table td { padding: 6px 8px; color: var(--text-secondary); border-bottom: 1px solid var(--bg-tertiary); }
+
+@media (max-width: 768px) {
+  .root { gap: 16px; max-width: none; }
+
+  /* Stats grid: 2-up on mobile so the values stay readable rather than
+     getting squeezed into a single row. */
+  .statsGrid { gap: 8px; }
+  .stat {
+    flex: 1 1 calc(50% - 8px);
+    min-width: 0;
+    padding: 10px 12px;
+  }
+  .statValue { font-size: 16px; }
+
+  /* Convert the stale table into a card list. Header row hidden; each <tr>
+     becomes a bordered card; each <td> becomes a label/value row whose
+     label comes from data-label set in Overview.tsx. */
+  .table { display: block; font-size: 13px; }
+  .table thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+  .table tbody { display: block; }
+  .table tr {
+    display: block;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 8px 10px;
+    margin-bottom: 8px;
+    background: var(--bg-secondary);
+  }
+  .table td {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 0;
+    border: none;
+    color: var(--text-primary);
+  }
+  .table td::before {
+    content: attr(data-label);
+    color: var(--text-muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-family: var(--font-sans);
+    margin-right: 12px;
+  }
+}
diff --git a/ui/client/src/views/Overview.tsx b/ui/client/src/views/Overview.tsx
index 09804bc..8d80afe 100644
--- a/ui/client/src/views/Overview.tsx
+++ b/ui/client/src/views/Overview.tsx
@@ -135,16 +135,16 @@ export default function Overview() {
                   <tr key={n.id}
                       style={{ cursor: 'pointer' }}
                       onClick={() => navigate(`/nodes/${encodeURIComponent(n.id)}`)}>
-                    <td>{n.id}</td>
-                    <td>{n.kind || '—'}</td>
-                    <td>{n.chapter || '—'}</td>
-                    <td>
+                    <td data-label="id">{n.id}</td>
+                    <td data-label="kind">{n.kind || '—'}</td>
+                    <td data-label="chapter">{n.chapter || '—'}</td>
+                    <td data-label="phase">
                       <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                         <span style={{ width: 8, height: 8, borderRadius: '50%', background: PHASE_COLORS[n.phase] }} />
                         {PHASE_LABELS[n.phase]}
                       </span>
                     </td>
-                    <td>{d == null ? '∞' : `${Math.floor(d)}d`}</td>
+                    <td data-label="idle">{d == null ? '∞' : `${Math.floor(d)}d`}</td>
                   </tr>
                 );
               })}