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 1/2] 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 705096950..c18ea50dc 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);} From 49d54e0a1d7107ef634d41e0cbd8d0b908a24d14 Mon Sep 17 00:00:00 2001 From: nankingjing <1079826437@qq.com> Date: Mon, 6 Jul 2026 10:02:05 +0800 Subject: [PATCH 2/2] fix(ux): scope mermaid min-height to inline+mobile only Remove min-height:200px from the global .mermaid-viewer-viewport rule (it was outside the @media(max-width:640px) block despite the PR title). Add a properly-scoped .mermaid-viewer--inline .mermaid-viewer-viewport min-height inside an actual @media(max-width:640px) block, capped at min(200px, 70vh) so it cannot override the lightbox fit-to-screen envelope. --- static/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/static/style.css b/static/style.css index c18ea50dc..3861e7b5e 100644 --- a/static/style.css +++ b/static/style.css @@ -2396,9 +2396,12 @@ .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%;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{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.is-panning{cursor:grabbing;} .mermaid-viewer--inline .mermaid-viewer-viewport{width:100%;max-height:70vh;} + @media (max-width: 640px){ + .mermaid-viewer--inline .mermaid-viewer-viewport{min-height:min(200px,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);} .mermaid-viewer-canvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;} .mermaid-viewer-svg{display:block;width:100%;height:100%;}