From 66eaaf0da39cd054d9e346f6a892596212c2b1c0 Mon Sep 17 00:00:00 2001 From: Teigen Date: Mon, 6 Jul 2026 10:36:57 +0800 Subject: [PATCH] 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);