Fix math and mermaid rendering bugs (#24049)

1. Fix multiple error display for math and mermaid:


![err](https://user-images.githubusercontent.com/115237/231126411-8a21a777-cd53-4b7e-ac67-5332623106e8.gif)

2. Fix height calculation of certain mermaid diagrams by reading the
iframe inner height from it's document instead of parsing it from SVG:

Before:
<img width="866" alt="Screenshot 2023-04-11 at 11 56 27"
src="https://user-images.githubusercontent.com/115237/231126480-b194e02b-ea8c-4ddf-8c79-50c525815d92.png">

After:
<img width="855" alt="Screenshot 2023-04-11 at 11 56 35"
src="https://user-images.githubusercontent.com/115237/231126494-5fe86a48-8d21-455a-8b95-79b6ee27a16f.png">

3. Refactor error handling to a common function
4. Rename to `renderAsciicast` for consistency
5. Improve mermaid loading sequence

Note: I did try `securityLevel: 'sandbox'` to make mermaid output a
iframe directly, but that showed a bug in mermaid where the iframe style
height was set incorrectly. Opened
https://github.com/mermaid-js/mermaid/issues/4289 for this.

---------

Co-authored-by: Giteabot <teabot@gitea.io>

web_src/css/base.css

@@ -9,7 +9,7 @@
   /* non-color variables */
   --border-radius: 0.28571429rem;
   --opacity-disabled: 0.55;
-  --height-loading: 12rem;
+  --height-loading: 16rem;
   /* base colors */
   --color-primary: #4183c4;
   --color-primary-contrast: #ffffff;

web_src/css/helpers.css

@@ -25,7 +25,8 @@
 .gt-overflow-x-scroll { overflow-x: scroll !important; }
 .gt-cursor-default { cursor: default !important; }
 .gt-items-start { align-items: flex-start !important; }
-.gt-whitespace-pre { white-space: pre !important }
+.gt-whitespace-pre { white-space: pre !important; }
+.gt-invisible { visibility: hidden !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;

web_src/css/markup/content.css

@@ -542,7 +542,7 @@
 
 .markup-block-error {
   display: block !important; /* override fomantic .ui.form .error.message {display: none} */
-  border: 1px solid var(--color-error-border) !important;
+  border: none !important;
   margin-bottom: 0 !important;
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;