From bb90f76d049f5a4606633daf675b9fb956fa0676 Mon Sep 17 00:00:00 2001
From: tmoonlight <shaohaozhi@live.cn>
Date: Sun, 27 Sep 2026 21:18:05 +0800
Subject: [PATCH] Keep Mermaid diagrams at their original width and height

---
 web/src/lib/imageLightboxArchitecture.test.js | 2 +-
 web/src/lib/mermaidRenderer.js                | 3 ++-
 web/src/styles/globals.css                    | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/imageLightboxArchitecture.test.js b/web/src/lib/imageLightboxArchitecture.test.js
index 605deb89..4641b2d7 100644
--- a/web/src/lib/imageLightboxArchitecture.test.js
+++ b/web/src/lib/imageLightboxArchitecture.test.js
@@ -71,7 +71,7 @@ run('ready Mermaid images are native preview buttons backed by sanitized SVG det
   assert.match(renderer, /theme,/);
   assert.match(renderer, /target\.replaceChildren\(previewTrigger\)/);
   assert.match(styles, /\.ace-mermaid-preview-trigger/);
-  assert.match(styles, /\.ace-mermaid-preview-trigger\s*\{[^}]*width: 100%/);
+  assert.match(styles, /\.ace-mermaid-preview-trigger\s*\{[^}]*width: max-content/);
   assert.match(styles, /cursor: zoom-in/);
 });
 
diff --git a/web/src/lib/mermaidRenderer.js b/web/src/lib/mermaidRenderer.js
index e8b3e5ab..51dcbc5d 100644
--- a/web/src/lib/mermaidRenderer.js
+++ b/web/src/lib/mermaidRenderer.js
@@ -411,8 +411,9 @@ export function installMermaidRenderer(
     });
     image.className = 'ace-mermaid-svg';
     image.alt = 'Mermaid diagram';
-    // SVG percentage widths are not intrinsic image sizes; use the parsed diagram width.
+    // Use the SVG viewBox dimensions at 1:1, independent of the container size.
     image.style.width = `${result.width}px`;
+    image.style.height = `${result.height}px`;
     image.width = Math.ceil(result.width);
     image.height = Math.ceil(result.height);
     image.decoding = 'async';
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 763b37dd..cd1d3028 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -3194,7 +3194,8 @@ body {
 }
 .ace-mermaid-preview-trigger {
   display: block;
-  width: 100%;
+  width: max-content;
+  min-width: 100%;
   padding: 0;
   border: 0;
   outline: 0;
@@ -3210,7 +3211,8 @@ body {
   display: block;
   width: auto;
   height: auto;
-  max-width: 100%;
+  max-width: none;
+  max-height: none;
   margin: 0 auto;
   pointer-events: none;
 }