From bb0055d461debebe9dfcc4db6f9155870473142e Mon Sep 17 00:00:00 2001
From: jwijenbergh <jeroenwijenbergh@protonmail.com>
Date: Mon, 1 May 2023 16:16:40 +0200
Subject: Docs: Only increase the width for the state machine

---
 docs/custom.css              | 7 +++++--
 docs/src/api/statemachine.md | 4 ++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/custom.css b/docs/custom.css
index 7a2dc5b..fe5455e 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -1,3 +1,6 @@
-:root {
-  --content-max-width: 1500px;
+.statemachine {
+    position: relative;
+    width: 80vw;
+    left: 50%;
+    transform: translateX(-50%);
 }
diff --git a/docs/src/api/statemachine.md b/docs/src/api/statemachine.md
index 260266c..60a76ba 100644
--- a/docs/src/api/statemachine.md
+++ b/docs/src/api/statemachine.md
@@ -12,6 +12,8 @@ can convert this to an image using the [Mermaid command-line client](https://git
 ## FSM example
 The following is an example of the FSM when the client has obtained a Wireguard/OpenVPN configuration from an eduVPN server
 
+<div class="statemachine">
+
 ```mermaid
 graph TD
 
@@ -94,6 +96,8 @@ style Got_Config fill:cyan
 Got_Config(Got_Config) -->|Get a new configuration| Loading_Server
 ```
 
+</div>
+
 The current state is highlighted in the <span style="color:cyan">cyan</span> color.
 
 ## State explanation
-- 
cgit v1.2.3