From 0a4ecee9c246b621127ac147dc198be2ff525001 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 22 Oct 2021 16:14:14 +0100
Subject: [PATCH] Fix help button not working on pipeline page, improves
 background of help container

---
 core/src/main/resources/lib/form/helpArea.jelly |  2 +-
 war/src/main/js/widgets/config/tabbar.less      |  5 -----
 war/src/main/less/base/style.less               | 16 +++++++++++++++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/core/src/main/resources/lib/form/helpArea.jelly b/core/src/main/resources/lib/form/helpArea.jelly
index 4b40a3e04553..721748914ddc 100644
--- a/core/src/main/resources/lib/form/helpArea.jelly
+++ b/core/src/main/resources/lib/form/helpArea.jelly
@@ -27,7 +27,7 @@ THE SOFTWARE.
   <st:documentation>
     Place holder to lazy-load help text via AJAX.
   </st:documentation>
-  <div class="help-area">
+  <div class="help-area tr">
       <div class="help">${%Loading...}</div>
   </div>
 </j:jelly>
diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less
index 2786bf282877..8c2514853cc3 100644
--- a/war/src/main/js/widgets/config/tabbar.less
+++ b/war/src/main/js/widgets/config/tabbar.less
@@ -192,11 +192,6 @@
         }
       }
 
-      // Help & descriptions
-      .help {
-        background: var(--configure-job-help-area-bg-color);
-      }
-
       p,
       .help,
       .setting-description {
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index 3a303956dbcd..628c1bd3b45d 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -632,12 +632,26 @@ label.attach-previous {
 /* ====================== help ===================================== */
 
 .help {
+  position: relative;
   display: none;  /* hidden until loaded */
-  background-color: var(--help-area-bg-color);
   padding: 1rem;
   margin: 1rem 0;
   word-break: break-word;
   border-radius: 6px;
+  z-index: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: var(--text-color);
+    opacity: 0.05;
+    z-index: -1;
+    border-radius: inherit;
+  }
 
   p:first-of-type {
     margin-top: 0;