fix: size mermaid iframe by the diagram's aspect ratio (#40046) (#40052)

Backport https://github.com/go-gitea/gitea/pull/40046

Mermaid scales diagrams wider than the markup column down to its width,
but the iframe kept the unscaled viewBox height, leaving a large blank
area below them. The iframe now uses a CSS `aspect-ratio` capped at the
viewBox height. Diagrams that don't scale (`useMaxWidth: false`) keep
the fixed height.

The cherry-pick conflicted only on the `srcdoc` line, which uses an
`html` template on `main` but a plain string on `release/v28`.

Fixes: https://github.com/go-gitea/gitea/issues/40045

web_src/js/markup/mermaid.ts

@@ -111,8 +111,16 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       const iframe = document.createElement('iframe');
       iframe.classList.add('markup-content-iframe', 'tw-invisible');
       iframe.srcdoc = '<style>body { margin: 0; overflow: hidden; } #mermaid { display: block; margin: 0 auto; }</style>';
-      const viewBoxHeight = svgNode.viewBox.baseVal?.height;
-      if (viewBoxHeight) iframe.style.height = `${Math.max(Math.ceil(viewBoxHeight), 85)}px`; // min-height keeps the buttons from overlapping
+      const viewBox = svgNode.viewBox.baseVal;
+      if (viewBox?.height) {
+        iframe.style.height = `${Math.ceil(viewBox.height)}px`;
+        iframe.style.minHeight = '85px'; // keeps the buttons from overlapping
+        if (svgNode.getAttribute('width') === '100%') { // svg shrinks to the iframe width, so the height must follow its aspect ratio
+          iframe.style.aspectRatio = `${viewBox.width} / ${viewBox.height}`;
+          iframe.style.maxHeight = iframe.style.height;
+          iframe.style.height = 'auto';
+        }
+      }
 
       // the iframe will be fully reloaded if its DOM context is changed (e.g.: moved in the DOM tree).
       // to avoid unnecessary reloading, we should insert the iframe to its final position only once.