Fix Mermaid SVG CSS

Author: penelopeysm

developers/transforms/dynamicppl/index.qmd

@@ -238,6 +238,8 @@ The following diagram shows how `assume` first checks whether the variable is tr
 
 <!-- 'wrappingWidth' setting required because of https://github.com/mermaid-js/mermaid-cli/issues/112#issuecomment-2352670995 -->
 ```{mermaid}
+%%| echo: false
+
 %%{ init: { 'themeVariables': { 'lineColor': '#000000' } } }%%
 %%{ init: { 'flowchart': { 'curve': 'linear', 'wrappingWidth': -1 } } }%%
 graph TD
@@ -276,6 +278,9 @@ Could we not, for example, store the required transformation inside the `VarInfo
 That is, why can't we just do
 
 ```{mermaid}
+%%| echo: false
+%%| fig-width: 5
+
 %%{ init: { 'flowchart': { 'curve': 'linear', 'wrappingWidth': -1 } } }%%
 %%{ init: { 'themeVariables': { 'lineColor': '#000000' } } }%%
 graph TD
@@ -397,3 +402,5 @@ and if we apply this to the internal representation of `x`:
 ```{julia}
 new_f_inv(DynamicPPL.getindex_internal(vi_linked, vn_x))
 ```
+
+which is the same value as we got above in `retval`.

theming/styles.css

@@ -1,19 +1,3 @@
-/* css styles */
-/* .cell-output {
-    background-color: #f1f3f5;
-} */
-
-/* .cell-output img {
-    max-width: 100%;
-    height: auto;
-} */
-
-/* .cell-output-display pre {
-    word-break: break-wor !important;
-    white-space: pre-wrap !important;
-}
- */
-
 .navbar a:hover {
     text-decoration: none;
 }
@@ -31,10 +15,19 @@
     white-space: pre-wrap !important;
 }
 
+.cell-output-display svg {
+    height: fit-content;
+    width: fit-content;
+}
 
 .cell-output-display svg {
     height: fit-content;
     width: fit-content;
+
+    &.mermaid-js {
+        /* fit-content for mermaid diagrams makes them really small */
+        width: 100%;
+    }
 }
 
 .cell-output-display img {
@@ -54,4 +47,4 @@
     border-radius: 5px;
     max-height: 250px;
     overflow: scroll;
-}
+}