Mermaid d-lang improved

Author: saowang

_includes/shortcodes/mermaid.liquid

@@ -1 +1,3 @@
-<div class="mermaid overflow-x-auto p-3 mb-4" data-lang="{{ codes | split: ' ' | first }}">{{ codes }}</div>
+<div class="mermaid-wrap mb-4" data-lang="{{ codes | split: ' ' | first }}">
+    <div class="mermaid overflow-x-auto p-3">{{ codes }}</div>
+</div>

_sass/class/markdown-body.scss

@@ -4,8 +4,8 @@
 
     &:after {
       position: absolute;
-      right: 0;
-      top: 0;
+      right: 0px;
+      top: 0px;
       font-family: $mono-font;
       font-size: $font-size-small;
       content: attr(data-lang);
@@ -97,14 +97,17 @@
     margin-right: 3px;
   }
 
-  // improved mermaid
-  // .mermaid:not([data-processed="true"])
-  .mermaid {
-    font-size: $font-size-small;
-    font-family: $mono-font;
-    white-space: pre;
+  // mermaid improved
+  .mermaid-wrap {
     @extend .d-lang;
     // mdl
     @include shadow-2dp();
+
+    // .mermaid:not([data-processed="true"])
+    .mermaid {
+      font-size: $font-size-small;
+      font-family: $mono-font;
+      white-space: pre;
+    }
   }
 }