From f28142f5e4a982adc4de5b30a9fbbbadc7b68034 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 8 Nov 2024 18:23:22 +0100
Subject: [PATCH 1/3] Fix mermaid diagram height when it's initially hidden

Fixes: https://github.com/go-gitea/gitea/issues/32392
---
 web_src/js/markup/mermaid.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index f2754e659baa6..31782f61b1c9e 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -57,10 +57,19 @@ export async function renderMermaid() {
       btn.setAttribute('data-clipboard-text', source);
       mermaidBlock.append(btn);
 
+      const updateIframeHeight = () => {
+        iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
+      };
+
+      // update height when element becomes visible, for example when the diagram is inside a details+summary block
+      (new IntersectionObserver(() => {
+        updateIframeHeight();
+      }, {root: document.documentElement})).observe(iframe);
+
       iframe.addEventListener('load', () => {
         pre.replaceWith(mermaidBlock);
         mermaidBlock.classList.remove('tw-hidden');
-        iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
+        updateIframeHeight();
         setTimeout(() => { // avoid flash of iframe background
           mermaidBlock.classList.remove('is-loading');
           iframe.classList.remove('tw-invisible');

From a221c781a5a682bbc2cfe8719211625523d573c8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 8 Nov 2024 18:32:33 +0100
Subject: [PATCH 2/3] update comment

---
 web_src/js/markup/mermaid.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 31782f61b1c9e..a155de19cc7ce 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -61,7 +61,8 @@ export async function renderMermaid() {
         iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
       };
 
-      // update height when element becomes visible, for example when the diagram is inside a details+summary block
+      // update height when element's visibility state changes, for example when the diagram is inside
+      // a <details> + <summary> block and the <details> block becomes visible upon user interaction
       (new IntersectionObserver(() => {
         updateIframeHeight();
       }, {root: document.documentElement})).observe(iframe);

From d72fce9afa7f35005642b2c64682287558fb373c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 8 Nov 2024 19:13:23 +0100
Subject: [PATCH 3/3] Update web_src/js/markup/mermaid.ts

---
 web_src/js/markup/mermaid.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index a155de19cc7ce..5c27d6ca1ceaa 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -62,7 +62,8 @@ export async function renderMermaid() {
       };
 
       // update height when element's visibility state changes, for example when the diagram is inside
-      // a <details> + <summary> block and the <details> block becomes visible upon user interaction
+      // a <details> + <summary> block and the <details> block becomes visible upon user interaction, it
+      // would initially set a incorrect height and the correct height is set during this callback.
       (new IntersectionObserver(() => {
         updateIframeHeight();
       }, {root: document.documentElement})).observe(iframe);