diff --git a/blueprint/src/mobile.css b/blueprint/src/mobile.css
new file mode 100644
index 0000000..670a987
--- /dev/null
+++ b/blueprint/src/mobile.css
@@ -0,0 +1,233 @@
+/* Blueprint Mobile Responsive — all rules scoped to @media (max-width: 768px) */
+
+/* ── TOC backdrop (injected by mobile.js) ── */
+.mobile-toc-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 99;
+}
+.mobile-toc-backdrop.visible {
+  display: block;
+}
+
+@media (max-width: 768px) {
+
+  /* ── 1. TOC as fixed slide-in overlay ── */
+  nav.toc {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(280px, 80vw);
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    background: #fff;
+    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
+    display: flex !important;
+    flex-direction: column;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-right: 0;
+    padding: 0.5rem;
+    padding-top: 3.5rem;
+    border-right: 1px solid #e0e0e0;
+  }
+  nav.toc.mobile-open {
+    transform: translateX(0);
+  }
+  body.mobile-toc-active {
+    overflow: hidden;
+  }
+
+  /* ── 2. MathJax overflow ── */
+  mjx-container[jax="CHTML"] {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+  mjx-container[jax="CHTML"][display="true"] {
+    overflow-x: auto;
+    max-width: 100%;
+    padding: 4px 0;
+  }
+  div.displaymath {
+    max-width: 100%;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* ── 3. Content area ── */
+  div.content {
+    padding: 0.75rem;
+    margin-bottom: 3rem;
+  }
+  div.content-wrapper {
+    max-width: 100%;
+  }
+  div.content > p {
+    margin: 1rem 0;
+  }
+
+  /* Reduce theorem/proof indentation */
+  div[class$=_thmcontent] {
+    margin-left: 0.25rem;
+    padding-left: 0.5rem;
+  }
+  div.proof_content {
+    margin-left: 0.25rem;
+    padding-left: 0.5rem;
+  }
+
+  /* ── 4. Hover-only elements → always visible on touch ── */
+  div.thm_header_hidden_extras {
+    display: inline-block !important;
+    opacity: 0.6;
+  }
+
+  /* ── 5. Annotation system ── */
+
+  /* Enlarge touch targets (44px Apple HIG minimum) */
+  .annotation-indicator {
+    min-width: 44px;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    font-size: 1rem;
+  }
+
+  /* Float indicator: keep within viewport */
+  .ann-indicator-float {
+    right: 0;
+    position: static;
+    float: right;
+  }
+
+  /* Prevent iOS Safari auto-zoom on focus (font-size >= 16px) */
+  .ann-author-input,
+  .ann-text-input,
+  .ann-edit-textarea {
+    font-size: 16px !important;
+  }
+
+  /* Stack author label + input vertically */
+  .ann-input-row {
+    flex-direction: column;
+    gap: 4px;
+  }
+  .ann-input-row label {
+    min-width: auto;
+  }
+
+  /* Larger submit button */
+  .ann-submit-btn {
+    width: 100%;
+    min-height: 44px;
+    font-size: 1rem;
+  }
+
+  /* Larger action buttons */
+  .ann-actions button {
+    min-height: 36px;
+    padding: 6px 12px;
+    font-size: 0.85rem;
+  }
+
+  /* Toolbar: avoid overlap with fixed bottom nav */
+  #annotation-toolbar {
+    bottom: 3.5rem;
+  }
+  #annotation-toolbar .ann-toolbar-main {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  /* ── 6. Bottom navigation bar ── */
+  nav.prev_up_next {
+    width: 100%;
+    left: 0;
+    justify-content: center;
+    gap: 1rem;
+  }
+  nav.prev_up_next a {
+    padding: 0.5rem 1.5rem;
+  }
+  /* showmore icons in bottom bar */
+  nav.prev_up_next svg.showmore {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0.5rem;
+  }
+
+  /* ── 7. Dependency graph pages ── */
+  div#graph {
+    height: 70vh;
+    touch-action: none;
+    overflow: hidden;
+  }
+
+  /* Node detail modal → full screen */
+  div.dep-modal-container {
+    width: 100vw !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    margin-top: 0 !important;
+    max-height: 100vh;
+    top: 0 !important;
+  }
+  div.dep-modal-content {
+    max-height: calc(100vh - 2rem);
+    border-radius: 0;
+  }
+  button.dep-closebtn {
+    min-width: 44px;
+    min-height: 44px;
+    font-size: 1.5rem;
+  }
+
+  /* Legend: wider on mobile so text is readable */
+  #Legend dl {
+    max-width: 70%;
+    font-size: 100%;
+  }
+
+  /* ── 8. Lean declaration modal ── */
+  div.modal-content {
+    width: 95vw;
+    max-height: 80vh;
+    margin: 10vh auto;
+  }
+  div.modal-content header button.closebtn {
+    min-width: 44px;
+    min-height: 44px;
+    font-size: 1.5rem;
+  }
+
+  /* ── 9. Header ── */
+  body > header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+  }
+  #toc-toggle {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  /* ── 10. Local TOC (in-page) ── */
+  nav.local_toc ul {
+    padding-left: 0.5rem;
+  }
+
+  /* ── 11. Tables: horizontal scroll ── */
+  .tabular {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+} /* end @media (max-width: 768px) */
diff --git a/blueprint/src/mobile.js b/blueprint/src/mobile.js
new file mode 100644
index 0000000..21f9f3c
--- /dev/null
+++ b/blueprint/src/mobile.js
@@ -0,0 +1,164 @@
+/* Blueprint Mobile Enhancements — TOC overlay, dep-graph pan-zoom, MathJax tweaks */
+(function() {
+  'use strict';
+
+  var MOBILE_BREAKPOINT = 768;
+
+  function isMobile() {
+    return window.innerWidth <= MOBILE_BREAKPOINT;
+  }
+
+  /* ── 1. TOC slide-in overlay ──
+   *
+   * Overrides the simple jQuery .toggle() in plastex.js with a proper
+   * slide-in drawer + backdrop. Only activates on narrow screens.
+   */
+  function initTocOverlay($) {
+    if (!isMobile()) return;
+
+    var $toc = $('nav.toc');
+    if (!$toc.length) return;
+
+    // Undo any inline display style that plastex.js .toggle() may have set
+    $toc.css('display', '');
+
+    var $backdrop = $('<div class="mobile-toc-backdrop">');
+    $('body').append($backdrop);
+
+    function openToc() {
+      $toc.addClass('mobile-open');
+      $backdrop.addClass('visible');
+      $('body').addClass('mobile-toc-active');
+    }
+
+    function closeToc() {
+      $toc.removeClass('mobile-open');
+      $backdrop.removeClass('visible');
+      $('body').removeClass('mobile-toc-active');
+    }
+
+    function toggleToc() {
+      if ($toc.hasClass('mobile-open')) {
+        closeToc();
+      } else {
+        openToc();
+      }
+    }
+
+    // Override the plastex.js click handler
+    $('#toc-toggle').off('click').on('click', function(e) {
+      e.stopPropagation();
+      toggleToc();
+    });
+
+    $backdrop.on('click', closeToc);
+
+    // Close after navigating
+    $toc.on('click', 'a', function() {
+      closeToc();
+    });
+
+    // Close on Escape
+    $(document).on('keydown', function(e) {
+      if (e.key === 'Escape' && $toc.hasClass('mobile-open')) {
+        closeToc();
+      }
+    });
+  }
+
+
+  /* ── 2. Dependency graph pan-zoom ──
+   *
+   * Uses d3.zoom (included in the d3 v5 full bundle already loaded by
+   * dep_graph pages) to enable pinch-zoom and pan on the SVG graph.
+   * Works on both desktop (scroll-wheel) and mobile (touch gestures).
+   */
+  function initGraphPanZoom() {
+    var graphEl = document.getElementById('graph');
+    if (!graphEl || typeof d3 === 'undefined' || typeof d3.zoom !== 'function') return;
+
+    var observer = new MutationObserver(function(mutations, obs) {
+      var svg = graphEl.querySelector('svg');
+      if (!svg) return;
+      obs.disconnect();
+      // Small delay to let graphviz finish its post-render callbacks
+      setTimeout(function() { enablePanZoom(svg); }, 200);
+    });
+    observer.observe(graphEl, { childList: true, subtree: true });
+  }
+
+  function enablePanZoom(svgEl) {
+    var svgSel = d3.select(svgEl);
+    var g = svgSel.select('g');
+    if (!g.node()) return;
+
+    var zoom = d3.zoom()
+      .scaleExtent([0.2, 6])
+      .on('zoom', function() {
+        // d3 v5 API: transform is on d3.event, not the callback argument
+        g.attr('transform', d3.event.transform);
+      });
+
+    svgSel.call(zoom);
+
+    // Disable double-click zoom to prevent accidental triggers on mobile
+    svgSel.on('dblclick.zoom', null);
+
+    // Let SVG fill its container instead of using fixed width/height
+    svgEl.removeAttribute('width');
+    svgEl.removeAttribute('height');
+    svgEl.style.width = '100%';
+    svgEl.style.height = '100%';
+
+    // Fit initial view: reset to identity transform
+    var bbox = g.node().getBBox();
+    var containerW = graphEl.clientWidth;
+    var containerH = graphEl.clientHeight;
+    if (bbox.width > 0 && bbox.height > 0 && containerW > 0 && containerH > 0) {
+      var scale = Math.min(
+        containerW / bbox.width,
+        containerH / bbox.height
+      ) * 0.9;
+      var tx = (containerW - bbox.width * scale) / 2 - bbox.x * scale;
+      var ty = (containerH - bbox.height * scale) / 2 - bbox.y * scale;
+      svgSel.call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+    }
+  }
+
+
+  /* ── 3. MathJax mobile tweaks ── */
+  function initMathJaxTweaks() {
+    if (!isMobile()) return;
+
+    // Disable MathJax context menu on mobile (prevents long-press conflicts)
+    if (window.MathJax && window.MathJax.startup && window.MathJax.startup.promise) {
+      window.MathJax.startup.promise.then(function() {
+        try {
+          var opts = MathJax.config.options || {};
+          opts.menuOptions = opts.menuOptions || {};
+          opts.menuOptions.settings = opts.menuOptions.settings || {};
+          opts.menuOptions.settings.zoom = 'None';
+          opts.enableMenu = false;
+        } catch(e) { /* non-critical */ }
+      });
+    }
+  }
+
+
+  /* ── Init ── */
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+
+  function boot() {
+    // jQuery may not be loaded yet on dep_graph pages (different script order)
+    if (typeof jQuery !== 'undefined') {
+      initTocOverlay(jQuery);
+    }
+    initGraphPanZoom();
+    initMathJaxTweaks();
+  }
+
+})();
diff --git a/blueprint/src/plastex.cfg b/blueprint/src/plastex.cfg
index 734aeb7..43c3ba2 100644
--- a/blueprint/src/plastex.cfg
+++ b/blueprint/src/plastex.cfg
@@ -13,8 +13,8 @@ split-level=1
 
 [html5]
 localtoc-level=0
-extra-css=extra_styles.css annotations.css
-extra-js=annotations.js
+extra-css=extra_styles.css annotations.css mobile.css
+extra-js=annotations.js mobile.js
 mathjax-dollars=False
 
 [images]
diff --git a/ui/client/index.html b/ui/client/index.html
index 3c7b7ae..9a97766 100644
--- a/ui/client/index.html
+++ b/ui/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>KIP Dashboard</title>
   </head>
   <body>
diff --git a/ui/client/src/components/LogEntryLine.module.css b/ui/client/src/components/LogEntryLine.module.css
index 1e161cc..c7a8a1f 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; padding: 6px 0; }
+  .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..3877f10 100644
--- a/ui/client/src/components/NodeDetail.module.css
+++ b/ui/client/src/components/NodeDetail.module.css
@@ -320,3 +320,84 @@ 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; }
+
+.closeBtn {
+  margin-left: auto;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+@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; }
+
+  .closeBtn {
+    min-width: 44px;
+    min-height: 44px;
+    font-size: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .refLine { padding: 8px 0; font-size: 13px; }
+  .refLine code { font-size: 12px; }
+
+  summary.sectionLabel { padding: 8px 0; font-size: 11px; }
+
+  .leanRow { flex-direction: column; gap: 2px; }
+  .leanRow .leanVal { word-break: break-all; }
+
+  .commentTopic { font-size: 11px; }
+  .commentMeta { font-size: 12px; }
+  .commentText { font-size: 13px; line-height: 1.5; }
+  .commentItem { padding: 6px 0 6px 10px; }
+
+  .runItem { font-size: 12px; padding: 8px 10px; }
+  .runMeta { font-size: 11px; }
+  .runStatus { font-size: 11px; padding: 2px 7px; }
+}
diff --git a/ui/client/src/components/NodeDetail.tsx b/ui/client/src/components/NodeDetail.tsx
index 08fef4c..c16e798 100644
--- a/ui/client/src/components/NodeDetail.tsx
+++ b/ui/client/src/components/NodeDetail.tsx
@@ -112,7 +112,7 @@ export default function NodeDetail({ nodeId, onClose, onSelectNode }: Props) {
         <div className={styles.header}>
           <div className={styles.idRow}>
             <span className={styles.id}>{nodeId}</span>
-            <button onClick={onClose} style={{ marginLeft: 'auto', cursor: 'pointer', border: 'none', background: 'transparent', fontSize: 16, color: 'var(--text-muted)' }}>×</button>
+            <button className={styles.closeBtn} onClick={onClose} aria-label="Close">×</button>
           </div>
         </div>
         <div className={styles.section}>Node not found in index. Try re-running <code>python tools/kip-state/index.py</code>.</div>
@@ -128,9 +128,7 @@ export default function NodeDetail({ nodeId, onClose, onSelectNode }: Props) {
       <div className={styles.header}>
         <div className={styles.idRow}>
           <span className={styles.id}>{d.id}</span>
-          <button onClick={onClose}
-                  style={{ marginLeft: 'auto', cursor: 'pointer', border: 'none', background: 'transparent', fontSize: 18, color: 'var(--text-muted)', lineHeight: 1 }}
-                  aria-label="Close">×</button>
+          <button className={styles.closeBtn} onClick={onClose} aria-label="Close">×</button>
         </div>
         <div className={styles.subline}>
           {d.kind && <span className={styles.kindChip}>{d.kind}</span>}{' '}
@@ -209,6 +207,10 @@ export default function NodeDetail({ nodeId, onClose, onSelectNode }: Props) {
                   placeholder="your name"
                   value={reviewer}
                   onChange={e => setReviewer(e.target.value)}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
                 />
               </label>
               <textarea
diff --git a/ui/client/src/components/log-details/details.module.css b/ui/client/src/components/log-details/details.module.css
index 17fd554..59c044d 100644
--- a/ui/client/src/components/log-details/details.module.css
+++ b/ui/client/src/components/log-details/details.module.css
@@ -81,3 +81,12 @@
 }
 .inlineToggleBtn:hover { text-decoration: underline; }
 .expandHint { color: var(--text-muted); font-size: 10px; }
+
+@media (max-width: 768px) {
+  .codeBlock { font-size: 13px; max-height: 50vh; }
+  .bashBlock { font-size: 13px; }
+  .resultBlock { max-height: 40vh; }
+  .jsonTree { font-size: 12px; max-height: 40vh; }
+  .thinkingBlock { max-height: 50vh; }
+  .inlineToggleBtn { font-size: 12px; padding: 4px 6px; min-height: 28px; }
+}
diff --git a/ui/client/src/styles/global.css b/ui/client/src/styles/global.css
index f26f13e..f0ad052 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: 10px 10px; }
+  .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..c419577 100644
--- a/ui/client/src/views/LogViewer.module.css
+++ b/ui/client/src/views/LogViewer.module.css
@@ -119,3 +119,68 @@
 .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: 6px 12px; font-size: 12px; min-height: 36px; display: inline-flex; align-items: center; }
+  .resetFiltersBtn { padding: 6px 4px; min-height: 36px; display: inline-flex; align-items: center; }
+  .count { font-size: 10px; }
+
+  .groupHeader { padding: 10px 12px; font-size: 13px; }
+  .fileItem { padding: 8px 10px 8px 20px; font-size: 12px; min-height: 40px; }
+}
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..10615f5 100644
--- a/ui/client/src/views/Nodes.module.css
+++ b/ui/client/src/views/Nodes.module.css
@@ -76,7 +76,7 @@
   min-height: 0;
   min-width: 0;
 }
-.canvasInner { position: absolute; inset: 0; }
+.canvasInner { position: absolute; inset: 0; touch-action: none; }
 
 /* Server-rendered Graphviz SVG. dot uses different shape elements per node
    kind (ellipse / polygon / path / rect), so the highlight selectors cast a
@@ -182,3 +182,110 @@
 .drawerResize:active {
   background: rgba(3, 102, 214, 0.25);
 }
+
+.zoomControls {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.zoomControls button {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.92);
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+}
+.zoomControls button:active { background: var(--bg-tertiary); }
+
+/* Mobile-only filter toggle. Hidden on desktop where the sidebar is
+   permanently docked. */
+.mobileFilterToggle { display: none; }
+.mobileFilterToggle:active { background: var(--bg-tertiary); box-shadow: 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;
+    padding-top: env(safe-area-inset-top, 0);
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+  .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..cad95e3 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 ?? [];
@@ -173,13 +227,14 @@ export default function Nodes() {
     panZoomRef.current = svgPanZoom(svgEl, {
       zoomEnabled: true,
       controlIconsEnabled: false,
+      dblClickZoomEnabled: false,
       fit: isFirstMount,
       center: isFirstMount,
       mouseWheelZoomEnabled: true,
       preventMouseEventsDefault: false,
       minZoom: 0.2,
-      maxZoom: 8,
-      zoomScaleSensitivity: 0.4,
+      maxZoom: 50,
+      zoomScaleSensitivity: 0.5,
     });
     if (!isFirstMount && preservedZoom != null && preservedPan) {
       try {
@@ -263,7 +318,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}
@@ -271,6 +345,10 @@ export default function Nodes() {
           placeholder="id or substring…"
           value={search}
           onChange={e => setSearch(e.target.value)}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
         />
 
         <div className={styles.sidebarTitle}>Phase</div>
@@ -336,10 +414,15 @@ export default function Nodes() {
             <>graph rendered server-side via <code>dot</code> · {totalNodes} nodes total</>
           )}
         </div>
+        <div className={styles.zoomControls}>
+          <button type="button" onClick={() => panZoomRef.current?.zoomIn()} aria-label="Zoom in">+</button>
+          <button type="button" onClick={() => panZoomRef.current?.zoomOut()} aria-label="Zoom out">−</button>
+          <button type="button" onClick={() => { panZoomRef.current?.fit(); panZoomRef.current?.center(); }} aria-label="Fit to view">⤢</button>
+        </div>
       </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..9af31ab 100644
--- a/ui/client/src/views/Overview.module.css
+++ b/ui/client/src/views/Overview.module.css
@@ -18,6 +18,9 @@
 
 .empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }
 
+.phaseBar { height: 24px; border-radius: 4px; overflow: hidden; }
+.phaseLegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
+
 .statsGrid { display: flex; gap: 16px; flex-wrap: wrap; }
 .stat {
   display: flex; flex-direction: column; align-items: center;
@@ -33,3 +36,61 @@
 .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; }
+
+  .phaseBar { height: 36px; border-radius: 6px; }
+  .phaseLegend { font-size: 13px; gap: 10px; }
+
+  /* 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;
+  }
+
+  .table tr:active { background: var(--bg-tertiary); }
+}
diff --git a/ui/client/src/views/Overview.tsx b/ui/client/src/views/Overview.tsx
index 09804bc..313cfa5 100644
--- a/ui/client/src/views/Overview.tsx
+++ b/ui/client/src/views/Overview.tsx
@@ -57,7 +57,7 @@ export default function Overview() {
 
       <div className={styles.section}>
         <div className={styles.sectionLabel}>Phase distribution ({total} nodes)</div>
-        <div style={{ display: 'flex', height: 24, borderRadius: 4, overflow: 'hidden', border: '1px solid var(--border)' }}>
+        <div className={styles.phaseBar} style={{ display: 'flex', border: '1px solid var(--border)' }}>
           {PHASE_ORDER.map(p => {
             const c = phaseCounts[p] || 0;
             const pct = (c / total) * 100;
@@ -74,7 +74,7 @@ export default function Overview() {
             );
           })}
         </div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8, fontSize: 11, color: 'var(--text-secondary)' }}>
+        <div className={styles.phaseLegend}>
           {PHASE_ORDER.map(p => (
             <span key={p} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
               <span style={{ width: 8, height: 8, borderRadius: '50%', background: PHASE_COLORS[p] }} />
@@ -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>
                 );
               })}