BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-08 16:39:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): improve response-viewer readability on phones

Browse Source 
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.
This commit is contained in:
Teigen
2026-07-06 10:36:57 +08:00
parent 1fa88cd187
commit 66eaaf0da3
1 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/mobile.css
+27 -2
View File
@@ -1259,13 +1259,38 @@ html.mobile-init .file-browser-panel {
.response-viewer { .response-viewer {
padding-bottom: var(--safe-area-bottom, 0px); padding-bottom: var(--safe-area-bottom, 0px);
max-height: 92vh;
} }
.response-viewer-body { .response-viewer-body {
font-size: 12px; font-size: 14.5px;
padding: 12px; 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 */ /* Compact welcome overlay for mobile */
.welcome-content { .welcome-content {
max-width: calc(100vw - 1.5rem); max-width: calc(100vw - 1.5rem);