Fix various UI bugs (#32821)

3 files changed, 36 insertions, 26 deletions

diff --git a/modules/markup/markdown/markdown_math_test.go b/modules/markup/markdown/markdown_math_test.go
index e371b1c74a..a2213b2ce7 100644
--- a/modules/markup/markdown/markdown_math_test.go
+++ b/modules/markup/markdown/markdown_math_test.go
@@ -20,23 +20,23 @@ func TestMathRender(t *testing.T) {
 	}{
 		{
 			"$a$",
-			`<p><code class="language-math is-loading">a</code></p>` + nl,
+			`<p><code class="language-math">a</code></p>` + nl,
 		},
 		{
 			"$ a $",
-			`<p><code class="language-math is-loading">a</code></p>` + nl,
+			`<p><code class="language-math">a</code></p>` + nl,
 		},
 		{
 			"$a$ $b$",
-			`<p><code class="language-math is-loading">a</code> <code class="language-math is-loading">b</code></p>` + nl,
+			`<p><code class="language-math">a</code> <code class="language-math">b</code></p>` + nl,
 		},
 		{
 			`\(a\) \(b\)`,
-			`<p><code class="language-math is-loading">a</code> <code class="language-math is-loading">b</code></p>` + nl,
+			`<p><code class="language-math">a</code> <code class="language-math">b</code></p>` + nl,
 		},
 		{
 			`$a$.`,
-			`<p><code class="language-math is-loading">a</code>.</p>` + nl,
+			`<p><code class="language-math">a</code>.</p>` + nl,
 		},
 		{
 			`.$a$`,
@@ -64,27 +64,27 @@ func TestMathRender(t *testing.T) {
 		},
 		{
 			"$a$ ($b$) [$c$] {$d$}",
-			`<p><code class="language-math is-loading">a</code> (<code class="language-math is-loading">b</code>) [$c$] {$d$}</p>` + nl,
+			`<p><code class="language-math">a</code> (<code class="language-math">b</code>) [$c$] {$d$}</p>` + nl,
 		},
 		{
 			"$$a$$",
-			`<code class="chroma language-math display">a</code>` + nl,
+			`<code class="language-math display">a</code>` + nl,
 		},
 		{
 			"$$a$$ test",
-			`<p><code class="language-math display is-loading">a</code> test</p>` + nl,
+			`<p><code class="language-math">a</code> test</p>` + nl,
 		},
 		{
 			"test $$a$$",
-			`<p>test <code class="language-math display is-loading">a</code></p>` + nl,
+			`<p>test <code class="language-math">a</code></p>` + nl,
 		},
 		{
 			`foo $x=\$$ bar`,
-			`<p>foo <code class="language-math is-loading">x=\$</code> bar</p>` + nl,
+			`<p>foo <code class="language-math">x=\$</code> bar</p>` + nl,
 		},
 		{
 			`$\text{$b$}$`,
-			`<p><code class="language-math is-loading">\text{$b$}</code></p>` + nl,
+			`<p><code class="language-math">\text{$b$}</code></p>` + nl,
 		},
 	}
 
@@ -110,7 +110,7 @@ func TestMathRenderBlockIndent(t *testing.T) {
 \alpha
 \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 \alpha
 </code></pre>
 `,
@@ -122,7 +122,7 @@ func TestMathRenderBlockIndent(t *testing.T) {
  \alpha
  \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 \alpha
 </code></pre>
 `,
@@ -137,7 +137,7 @@ a
    d
   \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 a
 b
 c
@@ -154,7 +154,7 @@ c
   c
   \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 a
  b
 c
@@ -165,7 +165,7 @@ c
 			"indent-0-oneline",
 			`$$ x $$
 foo`,
-			`<code class="chroma language-math display"> x </code>
+			`<code class="language-math display"> x </code>
 <p>foo</p>
 `,
 		},
@@ -173,7 +173,7 @@ foo`,
 			"indent-3-oneline",
 			`   $$ x $$<SPACE>
 foo`,
-			`<code class="chroma language-math display"> x </code>
+			`<code class="language-math display"> x </code>
 <p>foo</p>
 `,
 		},
@@ -188,10 +188,10 @@ foo`,
 > \]
 `,
 			`<blockquote>
-<pre class="code-block is-loading"><code class="chroma language-math display">
+<pre class="code-block is-loading"><code class="language-math display">
 a
 </code></pre>
-<pre class="code-block is-loading"><code class="chroma language-math display">
+<pre class="code-block is-loading"><code class="language-math display">
 b
 </code></pre>
 </blockquote>
@@ -207,7 +207,7 @@ b
 2. b`,
 			`<ol>
 <li>a
-<pre class="code-block is-loading"><code class="chroma language-math display">
+<pre class="code-block is-loading"><code class="language-math display">
 x
 </code></pre>
 </li>
diff --git a/modules/markup/markdown/math/block_renderer.go b/modules/markup/markdown/math/block_renderer.go
index a770efa01c..c29f061882 100644
--- a/modules/markup/markdown/math/block_renderer.go
+++ b/modules/markup/markdown/math/block_renderer.go
@@ -12,6 +12,17 @@ import (
 	"github.com/yuin/goldmark/util"
 )
 
+// Block render output:
+// 	<pre class="code-block is-loading"><code class="language-math display">...</code></pre>
+//
+// Keep in mind that there is another "code block" render in "func (r *GlodmarkRender) highlightingRenderer"
+// "highlightingRenderer" outputs the math block with extra "chroma" class:
+// 	<pre class="code-block is-loading"><code class="chroma language-math display">...</code></pre>
+//
+// Special classes:
+// * "is-loading": show a loading indicator
+// * "display": used by JS to decide to render as a block, otherwise render as inline
+
 // BlockRenderer represents a renderer for math Blocks
 type BlockRenderer struct {
 	renderInternal *internal.RenderInternal
@@ -38,7 +49,7 @@ func (r *BlockRenderer) writeLines(w util.BufWriter, source []byte, n gast.Node)
 func (r *BlockRenderer) renderBlock(w util.BufWriter, source []byte, node gast.Node, entering bool) (gast.WalkStatus, error) {
 	n := node.(*Block)
 	if entering {
-		code := giteaUtil.Iif(n.Inline, "", `<pre class="code-block is-loading">`) + `<code class="chroma language-math display">`
+		code := giteaUtil.Iif(n.Inline, "", `<pre class="code-block is-loading">`) + `<code class="language-math display">`
 		_ = r.renderInternal.FormatWithSafeAttrs(w, code)
 		r.writeLines(w, source, n)
 	} else {
diff --git a/modules/markup/markdown/math/inline_renderer.go b/modules/markup/markdown/math/inline_renderer.go
index 0cff4f1e74..4e0531cf40 100644
--- a/modules/markup/markdown/math/inline_renderer.go
+++ b/modules/markup/markdown/math/inline_renderer.go
@@ -13,6 +13,9 @@ import (
 	"github.com/yuin/goldmark/util"
 )
 
+// Inline render output:
+// <code class="language-math">...</code>
+
 // InlineRenderer is an inline renderer
 type InlineRenderer struct {
 	renderInternal *internal.RenderInternal
@@ -25,11 +28,7 @@ func NewInlineRenderer(renderInternal *internal.RenderInternal) renderer.NodeRen
 
 func (r *InlineRenderer) renderInline(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
 	if entering {
-		extraClass := ""
-		if _, ok := n.(*InlineBlock); ok {
-			extraClass = "display "
-		}
-		_ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math %sis-loading">`, extraClass)
+		_ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math">`)
 		for c := n.FirstChild(); c != nil; c = c.NextSibling() {
 			segment := c.(*ast.Text).Segment
 			value := util.EscapeHTML(segment.Value(source))