diff --git a/web/src/lib/imageLightboxArchitecture.test.js b/web/src/lib/imageLightboxArchitecture.test.js
index 7f6a22948..605deb897 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, /width: max-content/);
+  assert.match(styles, /\.ace-mermaid-preview-trigger\s*\{[^}]*width: 100%/);
   assert.match(styles, /cursor: zoom-in/);
 });
 
diff --git a/web/src/lib/mermaidRenderer.js b/web/src/lib/mermaidRenderer.js
index b2bf08cd9..e8b3e5abd 100644
--- a/web/src/lib/mermaidRenderer.js
+++ b/web/src/lib/mermaidRenderer.js
@@ -411,6 +411,8 @@ 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.
+    image.style.width = `${result.width}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 3810cf173..763b37dde 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -3194,8 +3194,7 @@ body {
 }
 .ace-mermaid-preview-trigger {
   display: block;
-  width: max-content;
-  min-width: 100%;
+  width: 100%;
   padding: 0;
   border: 0;
   outline: 0;
@@ -3211,7 +3210,7 @@ body {
   display: block;
   width: auto;
   height: auto;
-  max-width: none;
+  max-width: 100%;
   margin: 0 auto;
   pointer-events: none;
 }