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

fix(ux): add min-height to mermaid diagram viewport on mobile (#5525)

Browse Source 
The mermaid-viewer-viewport has position:relative with an
absolutely-positioned canvas child, so it collapses to 0 height
on narrow mobile screens where the SVG hasn't loaded yet.
Add min-height:200px so diagrams are visible while rendering.

Fixes #5525

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
nankingjingandClaude committed 2026-07-05 02:58:24 +08:00
1 parent 980e98dc7e
commit 1dd915ce15
1 file changed
+1 -1
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+1 -1
View File
@@ -2396,7 +2396,7 @@
.mermaid-viewer-btn{width:28px;height:28px;border:1px solid var(--border2);border-radius:6px;background:var(--input-bg);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;flex:0 0 auto;padding:0;}
.mermaid-viewer-btn:hover{background:var(--hover-bg);color:var(--text);}
.mermaid-viewer-btn svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.mermaid-viewer-viewport{position:relative;overflow:hidden;max-width:100%;border:1px solid var(--border);border-radius:8px;background:var(--code-bg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
.mermaid-viewer-viewport{position:relative;overflow:hidden;max-width:100%;min-height:200px;border:1px solid var(--border);border-radius:8px;background:var(--code-bg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
.mermaid-viewer-viewport.is-panning{cursor:grabbing;}
.mermaid-viewer--inline .mermaid-viewer-viewport{width:100%;max-height:70vh;}
.mermaid-viewer--lightbox .mermaid-viewer-viewport{max-width:90vw;max-height:90vh;border:none;box-shadow:0 8px 48px rgba(0,0,0,.6);}