From 1dd915ce15ff865a4a4d8eef82c2b01774b17586 Mon Sep 17 00:00:00 2001 From: nankingjing <1079826437@qq.com> Date: Sun, 5 Jul 2026 02:58:24 +0800 Subject: [PATCH] fix(ux): add min-height to mermaid diagram viewport on mobile (#5525) 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 --- static/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/style.css b/static/style.css index 70509695..c18ea50d 100644 --- a/static/style.css +++ b/static/style.css @@ -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);}