From 5efdd8db6e852ee4096d116af92261e87ce721d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sat, 5 Nov 2022 13:00:22 +0100
Subject: [PATCH] mermaid: fix Gantt chart width #365

---
 exampleSite/content/shortcodes/math.en.md    |  6 ++--
 exampleSite/content/shortcodes/mermaid.en.md | 10 +++----
 static/css/theme.css                         | 29 +++++++++++---------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/exampleSite/content/shortcodes/math.en.md b/exampleSite/content/shortcodes/math.en.md
index 7078049bec..c66a9ee9ae 100644
--- a/exampleSite/content/shortcodes/math.en.md
+++ b/exampleSite/content/shortcodes/math.en.md
@@ -107,19 +107,19 @@ Inline math is generated if you use a single `$` as a delimiter around your form
 
 Inline math is generated if you use a single `$` as a delimiter around your formulae: {{< math >}}$\sqrt{3}${{< /math >}}
 
-### Blocklevel Math with Left Alignment
+### Blocklevel Math with Right Alignment
 
 ````md
 If you delimit your formulae by two consecutive `$$` it generates a new block.
 
-{{</* math align="left" */>}}
+{{</* math align="right" */>}}
 $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
 {{</* /math */>}}
 ````
 
 If you delimit your formulae by two consecutive `$$` it generates a new block.
 
-{{< math align="left" >}}
+{{< math align="right" >}}
 $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
 {{< /math >}}
 
diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md
index be77ba2071..52b9c3d5da 100644
--- a/exampleSite/content/shortcodes/mermaid.en.md
+++ b/exampleSite/content/shortcodes/mermaid.en.md
@@ -116,7 +116,7 @@ mermaidInitialize = "{ \"theme\": \"dark\" }"
 ### Flowchart with Non-Default Mermaid Theme
 
 ````go
-{{</* mermaid align="left" */>}}
+{{</* mermaid */>}}
 %%{init:{"theme":"forest"}}%%
 graph LR;
     A[Hard edge] -->|Link text| B(Round edge)
@@ -126,7 +126,7 @@ graph LR;
 {{</* /mermaid */>}}
 ````
 
-{{< mermaid align="left" >}}
+{{< mermaid >}}
 %%{init:{"theme":"forest"}}%%
 graph LR;
     A[Hard edge] -->|Link text| B(Round edge)
@@ -207,10 +207,10 @@ gantt
         Add to Mermaid                      :1d
 {{< /mermaid >}}
 
-### Class
+### Class Diagram Aligned to the Right
 
 ````go
-{{</* mermaid */>}}
+{{</* mermaid align="right" */>}}
 classDiagram
     Class01 <|-- AveryLongClass : Cool
     Class03 *-- Class04
@@ -228,7 +228,7 @@ classDiagram
 {{</* /mermaid */>}}
 ````
 
-{{< mermaid >}}
+{{< mermaid align="right" >}}
 classDiagram
   Class01 <|-- AveryLongClass : Cool
   Class03 *-- Class04
diff --git a/static/css/theme.css b/static/css/theme.css
index 6e0ded86d3..f1b6f5be0e 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1466,14 +1466,14 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 	display: inline;
 }
 
-.math.align-center > mjx-container{
-    text-align: center !important;
-}
-
 .math.align-left > mjx-container{
     text-align: left !important;
 }
 
+.math.align-center > mjx-container{
+    text-align: center !important;
+}
+
 .math.align-right > mjx-container{
     text-align: right !important;
 }
@@ -1524,17 +1524,20 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 }
 */
 
-.align-right {
-    display: flex;
-    justify-content: right;
+.mermaid-container .align-right > *  {
+    display: block;
+    margin-left: auto;
+    margin-right: 0;
 }
 
-.align-center {
-    display: flex;
-    justify-content: center;
+.mermaid-container .align-center > *  {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-.align-left {
-    display: flex;
-    justify-content: left;
+.mermaid-container .align-left > * {
+    display: block;
+    margin-left: 0;
+    margin-right: auto;
 }