From ad7c1909a553bdeeae50748d33a0661ec869533e Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 16 Jun 2023 13:28:34 -0500
Subject: [PATCH] Website: Add max height to mermaid diagrams (#12374)

Closes: #12362
Changes:
- Added a max-height (~`800px`~ `600px`) for rendered mermaid diagrams
on fleetdm.com. (Edited by Mike T)

---------

Co-authored-by: Mike Thomas <mthomas@fleetdm.com>
Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
---
 website/assets/styles/pages/articles/basic-article.less  | 3 +++
 website/assets/styles/pages/docs/code-blocks.less        | 5 +++++
 website/assets/styles/pages/handbook/basic-handbook.less | 3 +++
 3 files changed, 11 insertions(+)

diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less
index 1024bde443..4dfe99c4b3 100644
--- a/website/assets/styles/pages/articles/basic-article.less
+++ b/website/assets/styles/pages/articles/basic-article.less
@@ -191,6 +191,9 @@
       margin-left: auto;
       margin-right: auto;
       background: #fff;
+      svg {
+        max-height: 600px;
+      }
     }
     blockquote {
       margin: 24px 0 32px 32px;
diff --git a/website/assets/styles/pages/docs/code-blocks.less b/website/assets/styles/pages/docs/code-blocks.less
index 0f887e9290..1233379489 100644
--- a/website/assets/styles/pages/docs/code-blocks.less
+++ b/website/assets/styles/pages/docs/code-blocks.less
@@ -22,6 +22,11 @@
   code.mermaid:not([data-processed='true']) {
     opacity: 0;
   }
+  code.mermaid[data-processed='true'] {
+    svg {
+      max-height: 600px;
+    }
+  }
 
   pre:not(.algolia-autocomplete):not(.ds-dropdown-menu):not(.json) {
     padding: 24px;
diff --git a/website/assets/styles/pages/handbook/basic-handbook.less b/website/assets/styles/pages/handbook/basic-handbook.less
index 2da4408385..5737e34291 100644
--- a/website/assets/styles/pages/handbook/basic-handbook.less
+++ b/website/assets/styles/pages/handbook/basic-handbook.less
@@ -239,6 +239,9 @@
       margin-bottom: 16px 0px 32px;
       font-family: @code-font;
       display: inline-block;
+      svg {
+        max-height: 600px;
+      }
     }
     pre:not(.algolia-autocomplete):not(.ds-dropdown-menu) {
       padding: 24px;