DasPoschi/hermes-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wrap markdown code blocks on mobile

Browse Source
This commit is contained in:
insecurejezza
2026-05-10 19:12:20 +10:00
parent e4a9c5b7f5
commit f7938372ba
2 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/style.css
View File

@@ -826,6 +826,12 @@
.msg-body pre[class*="language-"],.msg-body pre code[class*="language-"]{background:var(--code-bg) !important;}
/* Fix #1463: Prism YAML grammar collapses newlines inside token spans — force pre */
.msg-body pre code.language-yaml .token{white-space:pre !important;}
@media(max-width:700px){
.msg-body pre,.preview-md pre{white-space:pre-wrap !important;overflow-x:hidden !important;overflow-wrap:anywhere !important;}
.msg-body pre code,.preview-md pre code{white-space:inherit !important;overflow-wrap:anywhere !important;word-break:break-word !important;}
.msg-body pre code .token,.preview-md pre code .token{white-space:inherit !important;overflow-wrap:anywhere !important;word-break:inherit !important;}
.diff-block .diff-line{white-space:pre-wrap !important;overflow-wrap:anywhere !important;word-break:break-word !important;}
}
.pre-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 16px 8px;background:var(--input-bg);border-radius:10px 10px 0 0;border:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
.pre-header::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.4;}
.pre-header+pre{border-radius:0 0 10px 10px;border-top:none;margin-top:0;}

30
tests/test_mobile_markdown_wrapping.py Normal file
View File

@@ -0,0 +1,30 @@
from pathlib import Path
ROOT = Path(__file__).resolve().parents[1]
CSS = (ROOT / "static" / "style.css").read_text(encoding="utf-8")
def _mobile_code_wrap_block() -> str:
start = CSS.index("@media(max-width:700px){")
end = CSS.index(" .pre-header", start)
return CSS[start:end]
def test_mobile_markdown_code_blocks_wrap_instead_of_horizontal_scroll():
block = _mobile_code_wrap_block()
assert ".msg-body pre,.preview-md pre{white-space:pre-wrap !important;overflow-x:hidden !important;overflow-wrap:anywhere !important;}" in block
assert ".msg-body pre code,.preview-md pre code{white-space:inherit !important;overflow-wrap:anywhere !important;word-break:break-word !important;}" in block
def test_mobile_prism_tokens_do_not_force_horizontal_scroll():
block = _mobile_code_wrap_block()
assert ".msg-body pre code .token,.preview-md pre code .token{white-space:inherit !important;overflow-wrap:anywhere !important;word-break:inherit !important;}" in block
def test_mobile_diff_lines_wrap_instead_of_forcing_scroll():
block = _mobile_code_wrap_block()
assert ".diff-block .diff-line{white-space:pre-wrap !important;overflow-wrap:anywhere !important;word-break:break-word !important;}" in block