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

tests/e2e/mermaid.test.ts

@@ -6,16 +6,23 @@ test('mermaid diagram in issue', async ({page, request}) => {
   const repoName = `e2e-mermaid-${randomString(8)}`;
   const owner = env.GITEA_TEST_E2E_USER;
   await apiCreateRepo(request, {name: repoName, autoInit: false});
-  const body = '```mermaid\nflowchart LR\n  Alpha --> Beta\n  Beta --> Gamma\n```\n';
-  const {index} = await apiCreateIssue(request, {owner, repo: repoName, title: 'mermaid test', body});
+  const source = 'flowchart TD\n  Alpha --> Beta --> Gamma\n  Alpha --> Node1 & Node2 & Node3 & Node4 & Node5 & Node6 & Node7 & Node8';
+  const {index} = await apiCreateIssue(request, {owner, repo: repoName, title: 'mermaid test', body: `\`\`\`mermaid\n${source}\n\`\`\`\n`});
   await page.goto(`/${owner}/${repoName}/issues/${index}`);
 
   const svg = page.frameLocator('iframe.markup-content-iframe').locator('svg');
   await expect(svg).toContainText(/Alpha[\s\S]*Beta[\s\S]*Gamma/);
+  const [iframeWidth, iframeHeight, svgWidth, svgHeight] = await page.locator('iframe.markup-content-iframe').evaluate((iframe: HTMLIFrameElement) => {
+    const iframeRect = iframe.getBoundingClientRect();
+    const svgRect = iframe.contentDocument!.querySelector('svg')!.getBoundingClientRect();
+    return [iframeRect.width, iframeRect.height, svgRect.width, svgRect.height];
+  });
+  expect(svgWidth).toBeCloseTo(iframeWidth, 0);
+  expect(svgHeight).toBeCloseTo(iframeHeight, 0);
 
   await svg.hover();
   await page.locator('.code-copy').click();
-  await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('flowchart LR\n  Alpha --> Beta\n  Beta --> Gamma');
+  await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe(source);
 
   await assertNoJsError(page);
 });