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

[nankingjing]

Closes #5525

Summary

Mermaid diagrams have 0 height on mobile because the viewport container (.mermaid-viewer-viewport) has position:relative with an absolutely-positioned canvas child. Without an explicit min-height, the container collapses when the SVG hasn't rendered yet.

Fix

+1/-1: add min-height:200px to .mermaid-viewer-viewport so diagrams are visible on narrow mobile screens.

Files

static/style.css — .mermaid-viewer-viewport rule

[greptile-apps]

Greptile Summary

This PR fixes a layout collapse on mobile where mermaid diagram containers rendered at 0 height because all children use position: absolute, removing them from normal flow and leaving the parent with no intrinsic height.

• Adds min-height: min(200px, 70vh) inside a @media (max-width: 640px) block, scoped to .mermaid-viewer--inline .mermaid-viewer-viewport, so the container has a visible minimum before the SVG renders.
• The min() function is a thoughtful choice — it prevents min-height from exceeding the existing max-height: 70vh on very small viewport heights, avoiding the case where the floor would exceed the ceiling.
• The fix does not touch lightbox mode (.mermaid-viewer--lightbox), which already has explicit max-width/max-height declarations.

Confidence Score: 5/5

A single-file CSS fix that adds a guarded min-height to prevent container collapse on mobile — no logic paths, no data mutations, and no regressions on desktop.

The change is a narrow, well-scoped CSS addition. The media query limits the rule to mobile viewports only, the min() function prevents the floor from ever exceeding the existing max-height ceiling, and lightbox mode is left untouched. There are no functional regressions to worry about.

No files require special attention.

Important Files Changed

Filename	Overview
static/style.css	Adds a mobile-scoped media query (max-width: 640px) that applies min-height: min(200px, 70vh) to .mermaid-viewer--inline .mermaid-viewer-viewport, preventing the absolutely-positioned canvas container from collapsing to 0 height before the SVG renders.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Mermaid diagram inserted into DOM] --> B{Viewport width}
    B -- wider than 640px --> C[Height driven by JS after SVG renders]
    B -- 640px or narrower --> D[min-height applied via media query\nContainer stays visible before SVG loads]
    C --> E[SVG renders, JS sets canvas dimensions]
    D --> E
    E --> F[User pans and zooms the diagram]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Mermaid diagram inserted into DOM] --> B{Viewport width}
    B -- wider than 640px --> C[Height driven by JS after SVG renders]
    B -- 640px or narrower --> D[min-height applied via media query\nContainer stays visible before SVG loads]
    C --> E[SVG renders, JS sets canvas dimensions]
    D --> E
    E --> F[User pans and zooms the diagram]

Loading

_{Reviews (2): Last reviewed commit: "fix(ux): scope mermaid min-height to inl..." | Re-trigger Greptile}

[cutter-sh]

🎬 Cutter preview — PR #5560

/docs/diagrams — Mermaid diagrams now hold a minimum height on mobile so they render fully instead of collapsing.

[nesquena-hermes]

🔬 Gate certification — RED ⛔ (the min-height is GLOBAL, not mobile-only — can break the lightbox fit-to-screen on short viewports — 1 SILENT)

Certified head: sha:1dd915ce (rebased onto current master, git apply clean) · PR: #5560 · nankingjing, fix(ux): add min-height to mermaid diagram viewport on mobile (#5525)
Verdict: The intent (stop a short/loading mermaid diagram collapsing the viewport) is good, but the rule is NOT mobile-scoped as the title claims — the @media (max-width: 640px) block closes at style.css:2377, so the edited .mermaid-viewer-viewport rule at 2399 is a GLOBAL rule. min-height:200px therefore applies to the fullscreen .mermaid-viewer--lightbox too and can override its height:90vh fit-to-screen on very short viewports.

What I ran (rebased worktree /tmp/wt-rebase-5560)

Gate	Result
Rebase onto current master	✅ git apply clean; diff = static/style.css 1 line
Codex (reproduce)	SHIP-WITH-FIXES — 1 SILENT (global min-height breaks lightbox); Codex verified the media-block boundary
Full suite	skipped (1-line CSS, no code path) — Codex + scope check is the gate

Findings

⛔ SILENT (Codex CONFIRMED, corrected my read) — the min-height is GLOBAL, not mobile-only (static/style.css:2399): the @media (max-width: 640px) block CLOSES at line 2377, so the .mermaid-viewer-viewport rule at 2399 is a base/global rule (not inside the media query, despite the title "on mobile"). min-height:200px thus applies to both inline AND .mermaid-viewer--lightbox. The lightbox JS sets height:90vh (ui.js:1620-1622) and CSS caps it (style.css:2402), but the new global min-height overrides that when 90vh < 200px (a window shorter than ~222px) — breaking the fullscreen "fit to screen" envelope (#5413 inline-vs-lightbox territory). Fix (Codex-exact): remove min-height:200px from the global rule and add .mermaid-viewer--inline .mermaid-viewer-viewport{ min-height: min(200px, 70vh); } inside an ACTUAL @media (max-width: 640px) block — so it's inline-only, mobile-only, and can't exceed 70vh.

Recommendation to the next agent / author

RED — gate-fail/changes-requested (1 SILENT): scope the min-height to inline + mobile and cap it at viewport height — .mermaid-viewer--inline .mermaid-viewer-viewport{ min-height: min(200px, 70vh); } inside a real @media (max-width:640px) block; do NOT put min-height on the global .mermaid-viewer-viewport (it leaks into the lightbox and can override height:90vh on short viewports). The fix for #5525 (collapsing inline viewport) is worthwhile — it just needs the correct scope (the current rule is global despite the "on mobile" title). concept 4/5 (real fix, wrong scope). Author @nankingjing (new). crit=3. (Gate value + a self-correction: verify a CSS rule's media scope by the block's CLOSING brace, not just the nearest @media above — the @media(max-width:640px) here closed at 2377, so the 2399 rule was global; Codex caught what a nearest-open-media-above heuristic missed.)

---

Gate-certifier layer (warm-up → gate → release). I do not merge/tag/deploy. Rebased onto current master; Codex verified the @media(max-width:640px) block closes at style.css:2377 so the edited rule at 2399 is GLOBAL (not mobile-only) — min-height:200px leaks into .mermaid-viewer--lightbox and can override its height:90vh fit-to-screen when 90vh<200px. Fix: scope to .mermaid-viewer--inline inside a real mobile media block, cap at min(200px,70vh). Cert valid for sha:1dd915ce.

[nesquena-hermes]

🔬 Gate certification — GREEN ✅ · CONVERGED (round-1 global-leak brick fixed; full gate Codex + Fable-UX + suite) · ⏸️ visible mermaid → Nathan sign-off

Certified head: sha:292685a6 (clean rebase onto current master incl. the #5660 CI-flake fix, branch gate-rebase/5560-mermaid-minheight-inline-mobile) · PR: #5560 · fix(ux): add min-height to mermaid diagram viewport on mobile
Verdict: Round-2 CONVERGED. My round-1 RED (the min-height leaked GLOBAL into the fullscreen .mermaid-viewer--lightbox viewer, bricking fit-to-screen) is fixed — it's now scoped to @media (max-width: 640px) AND .mermaid-viewer--inline only. Codex SAFE, Fable-UX SHIP-UX, full suite green.

What I ran (rebased worktree /tmp/wt-rebase-5560b) — full gate: Codex + Fable + suite

Gate	Result
Rebase onto current master (incl. #5660 flake fix)	✅ git apply clean
Codex (re-verify scope, no lightbox leak)	SAFE TO SHIP — 0 findings
Fable-UX	SHIP-UX — inline mermaid gets sensible min-height, lightbox unaffected
Full pytest suite	✅ 12178 passed, 0 failed (the 3.11-shard-4 flake that red-failed round-1 is now fixed on master via #5660)

Findings — round-1 global-leak brick CLOSED

✅ Correctly scoped (verified by CLOSING brace, per the #5560 lesson): the min-height:min(200px,70vh) rule is INSIDE @media (max-width: 640px) (opens line 2402, single rule, closes 2404) AND scoped to .mermaid-viewer--inline .mermaid-viewer-viewport. The .mermaid-viewer--lightbox .mermaid-viewer-viewport (line 2405) is a SEPARATE rule with max-height:90vh and NO min-height — so the fullscreen/lightbox fit-to-screen is preserved (my round-1 brick concern, the #4856/#5338 global-viewport-rule-leaks-into-sibling-variant class, is fixed). Codex confirmed: applies only to inline mobile mermaid, not lightbox; media scope verified by closing brace; min(200px,70vh) sensible; desktop (>640px) unaffected; pan/zoom/touch-action intact. Fable confirmed the inline min-height looks right and the lightbox is unbricked. Full suite green.

Recommendation to the next agent / Nathan

GREEN — merge from branch gate-rebase/5560-mermaid-minheight-inline-mobile (sha:292685a6), NOT the PR's stale head 49d54e0a — after a quick visual sign-off (visible mermaid mobile). Round-1 global-leak brick fixed (min-height inline+mobile-scoped, lightbox fit-to-screen preserved), full gate clean. Note: the PR-head CI was red only on the 3.11-shard-4 multitab-SSE flake (NOT this PR's fault) — that flake is now fixed on master (#5660), so a re-run/rebase clears it; my rebased branch is full-suite green. concept 4/5. crit=2.

---

Gate-certifier layer (warm-up → gate → release). I do not merge/tag/deploy. Round-1 global-leak brick fixed: min-height now @media(max-width:640px)+.mermaid-viewer--inline scoped (verified by closing brace), lightbox (2405) has no min-height so fit-to-screen preserved; Codex SAFE + Fable-UX SHIP-UX + full suite green (0 failed). PR-head shard-4 red was the #5660 flake (now fixed on master), not this PR. Visible → Nathan. Cert valid for sha:292685a6.

[nesquena-hermes]

Shipped in v0.51.899. Thanks @nankingjing — inline Mermaid diagrams now get a min-height on mobile so they no longer collapse to 0 height (scoped so the lightbox + desktop are unaffected). This is the mobile-height half of #5525 (the icon half shipped earlier); #5525 stays open only for tracking closure.