Merge branch 'djadmin-fix-sandbox-styling' into 'master'

Fix styling issues for mermaid diagrams

See merge request gitlab-org/gitlab!78040

app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js

@@ -31,6 +31,7 @@ const MAX_CHAR_LIMIT = 2000;
 const MAX_MERMAID_BLOCK_LIMIT = 50;
 // Max # of `&` allowed in Chaining of links syntax
 const MAX_CHAINING_OF_LINKS_LIMIT = 30;
+const BUFFER_IFRAME_HEIGHT = 10;
 // Keep a map of mermaid blocks we've already rendered.
 const elsProcessingMap = new WeakMap();
 let renderedMermaidBlocks = 0;
@@ -117,9 +118,9 @@ function renderMermaidEl(el, source) {
       if (event.origin !== 'null' || event.source !== iframeEl.contentWindow) {
         return;
       }
-      const { h, w } = event.data;
-      iframeEl.width = w;
-      iframeEl.height = h;
+      const { h } = event.data;
+      iframeEl.width = '100%';
+      iframeEl.height = `${h + BUFFER_IFRAME_HEIGHT}px`;
     },
     false,
   );