From 66eaaf0da39cd054d9e346f6a892596212c2b1c0 Mon Sep 17 00:00:00 2001
From: Teigen <teigenzhang@gmail.com>
Date: Mon, 6 Jul 2026 10:36:57 +0800
Subject: [PATCH 1/2] fix(mobile): improve response-viewer readability on
 phones

The mobile media query only overrode .response-viewer-body with a flat
font-size: 12px / padding: 12px, leaving the desktop response-viewer
typography system (--rv-content-max, .rv-text pre, heading scale) with no
mobile tuning. Bump body text to 14.5px/1.65, give code blocks phone-sized
padding and 11.5px code, scale headings (h1 1.35em / h2 1.2em / h3 1.08em),
let content span full width, and cap the panel at 92vh.

Layers cleanly on top of the existing response-viewer selectors in
styles.css; desktop rendering is unchanged.
---
 src/web/public/mobile.css | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/web/public/mobile.css b/src/web/public/mobile.css
index ed681b37..0b3c6326 100644
--- a/src/web/public/mobile.css
+++ b/src/web/public/mobile.css
@@ -1259,13 +1259,38 @@ html.mobile-init .file-browser-panel {
 
   .response-viewer {
     padding-bottom: var(--safe-area-bottom, 0px);
+    max-height: 92vh;
   }
 
   .response-viewer-body {
-    font-size: 12px;
-    padding: 12px;
+    font-size: 14.5px;
+    line-height: 1.65;
+    padding: 16px 16px 24px;
+    --rv-content-max: 100%;
+  }
+
+  .response-viewer-body .rv-text pre,
+  .response-viewer-body pre {
+    /* Slightly smaller on mobile so diagrams fit better before scrolling */
+    padding: 12px 14px;
+    margin-left: -4px;
+    margin-right: -4px;
+    border-radius: 6px;
   }
 
+  .response-viewer-body .rv-text pre code,
+  .response-viewer-body pre code {
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+
+  .response-viewer-body .rv-text h1,
+  .response-viewer-body > h1 { font-size: 1.35em; }
+  .response-viewer-body .rv-text h2,
+  .response-viewer-body > h2 { font-size: 1.2em; }
+  .response-viewer-body .rv-text h3,
+  .response-viewer-body > h3 { font-size: 1.08em; }
+
   /* Compact welcome overlay for mobile */
   .welcome-content {
     max-width: calc(100vw - 1.5rem);

From e510ab74ca5928f66a74b5dbedf46f64b70d5931 Mon Sep 17 00:00:00 2001
From: Codeman maintainer <noreply@anthropic.com>
Date: Sun, 12 Jul 2026 13:20:16 +0200
Subject: [PATCH 2/2] fix(review): use dvh fallback pair so the response-viewer
 header stays on-screen on iOS (PR #142)

- 92vh on iOS Safari measures the large viewport; with browser chrome visible the
  panel top (header + close button) clipped off-screen. 88vh fallback + 92dvh
  matches the repo's established dvh idiom.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/web/public/mobile.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/web/public/mobile.css b/src/web/public/mobile.css
index 0b3c6326..4b442d52 100644
--- a/src/web/public/mobile.css
+++ b/src/web/public/mobile.css
@@ -1259,7 +1259,10 @@ html.mobile-init .file-browser-panel {
 
   .response-viewer {
     padding-bottom: var(--safe-area-bottom, 0px);
-    max-height: 92vh;
+    /* dvh tracks the visible viewport on iOS Safari (vh = large viewport and would clip
+       the header/close button off-screen); the vh line is the old-engine fallback */
+    max-height: 88vh;
+    max-height: 92dvh;
   }
 
   .response-viewer-body {