fix markdown image rendering (#636)

modules/ui/src/markdown/markdown.svelte

@@ -2,11 +2,13 @@
   import SvelteMarkdown from "svelte-markdown";
   import Link from "./link.svelte";
   import rst2html from "./rst2html";
-
   import "./styles.css";
+  import { onMount } from "svelte";
 
   export let source: { data: string; type: "md" | "rst" };
 
+  let markDownRoot: HTMLElement;
+
   export let hook = (node: HTMLElement): { destroy: () => void } => {
     console.log("hook", node);
     return {
@@ -21,11 +23,31 @@
   };
 
   $: html = source.type === "rst" ? rst2html(source.data) : "";
+
+  onMount(() => {
+    // Need to override the height/width STYLE with the old-school height/width ATTRIBUTE to make it work with the markdown
+    if (markDownRoot) {
+      const images = markDownRoot.querySelectorAll("img");
+      images.forEach((element: HTMLImageElement) => {
+        const height = element.getAttribute("height");
+        if (height) {
+          element.style.height = height;
+        }
+
+        const width = element.getAttribute("width");
+        if (width) {
+          element.style.width = width;
+        }
+      });
+    }
+  });
 </script>
 
 <section use:hook class="markdown-body py-4">
   {#if source.type === "md"}
-    <SvelteMarkdown source={source.data} {renderers} />
+    <div bind:this={markDownRoot}>
+      <SvelteMarkdown source={source.data} {renderers} />
+    </div>
   {:else if source.type === "rst"}
     {@html html}
   {/if}

modules/ui/src/markdown/styles.css

@@ -114,6 +114,7 @@
   max-width: 100%;
   box-sizing: content-box;
   background-color: #0d1117;
+  display: inline;
 }
 
 .markdown-body code,