From 3a5529f1dc8730c217f5fa3cf033974775de556f Mon Sep 17 00:00:00 2001
From: Carlos Fernandez <CarlosFdez@users.noreply.github.com>
Date: Mon, 13 Jul 2026 18:56:34 -0400
Subject: [PATCH] Cleanup secret block styling (#2088)

---
 styles/less/global/elements.less | 39 ++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less
index edc02f9a..1b7ed072 100755
--- a/styles/less/global/elements.less
+++ b/styles/less/global/elements.less
@@ -599,27 +599,23 @@
     }
 
     secret-block {
-        position: relative;
-        section.secret {
-            background-color: @red-10;
-            padding: 0;
-            margin-top: 0.375rem;
-            &.revealed {
-                background-color: @green-10;
-            }
-            p {
-                margin: 0.5rem 0;
-            }
-        }
+        display: block;
+
+        /** A buffer to make the hover behavior work a bit better. The bottom in the button needs to compensate */
+        @buffer: 8px;
+        margin-top: -@buffer;
+        padding-top: @buffer;
+
         button.reveal {
-            --button-size: 0.875rem;
+            --button-size: 1rem;
+            height: var(--button-size);
             position: absolute;
             margin: auto;
             left: 0;
             right: 0;
             width: min-content;
             padding: 1px 8px 0 8px;
-            bottom: calc(100% - 0.4375rem - 2px);
+            bottom: calc(100% - 0.4375rem - 1px);
             
             background-color: var(--dh-window-button-color-bg); // todo: find a better var name
             border-color: var(--color-secret-border);
@@ -627,6 +623,7 @@
             font-size: var(--font-size-10);
             user-select: none;
             text-transform: uppercase;
+            white-space: nowrap;
 
             visibility: hidden;
         }
@@ -635,6 +632,20 @@
             visibility: visible;
         }
     }
+
+    /** 
+     * The element inside a secret-block. 
+     * This is separate since during prosemirror editing, the secret-block container does not exist.
+     */
+    section.secret {
+        --color-secret-bg: @red-10;
+        --color-revealed-bg: @green-10;
+        position: relative;
+        padding: 0;
+        p {
+            margin: 0.5rem 0;
+        }
+    }
 }
 
 .system-daggerheart {