From be212bdbf6cc39935accd304baab0eb6b7ffc1b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Mon, 11 Mar 2024 22:28:27 +0100
Subject: [PATCH] mermaid: fix border position #795

---
 exampleSite/content/basics/migration/_index.en.md | 2 +-
 static/css/theme.css                              | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 2f906643a2..0567eca2a5 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -32,7 +32,7 @@ This document shows you what's new in the latest release and flags it with one o
 
   If you are using Hugo below {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.123.0{{% /badge %}}, you don't need to change anything as the old shortcode still works (but may generate warnings).
 
-  Other users are strongly advised to migrate as the `attachments` shortcode will not receive support anymore. Migration instructions are listed on the [`attachments` shortcode page](shortcodes/attachments#migration).
+  Anyways, users are strongly advised to migrate as the `attachments` shortcode will not receive support anymore. Migration instructions are listed on the [`attachments` shortcode page](shortcodes/attachments#migration).
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} If you run Hugo with [GitInfo](https://gohugo.io/methods/page/gitinfo/) configured, the default page footer now prints out name, email address and date of the last commit. If you want to turn this off you either have to run Hugo without GitInfo (which is the default) or overwrite the `content-footer.html` partial.
 
diff --git a/static/css/theme.css b/static/css/theme.css
index 2053def70b..2a03435236 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1370,26 +1370,27 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 
 .mermaid {
     display: inline-block;
+    border: 1px solid transparent;
     padding: .5rem .5rem 0 .5rem;
     position: relative;
     /* don't use display: none, as this will cause no renderinge by Mermaid */
     visibility: hidden;
     width: 100%;
 }
+.mermaid-container.zoomable > .mermaid:hover {
+    border-color: rgba( 134, 134, 134, .333 );
+}
 .mermaid.mermaid-render {
     visibility: visible;
 }
+
 .mermaid > svg {
     /* remove inline height from generated diagram */
-    border: 1px solid transparent;
     height: initial !important;
 }
 .mermaid-container.zoomable > .mermaid > svg {
     cursor: grab;
 }
-.mermaid-container.zoomable > .mermaid:hover > svg{
-    border-color: rgba( 134, 134, 134, .333 );
-}
 
 .svg-reset-button {
     background-color: rgba( 160, 160, 160, .2 );