From 25a9bc528a8d12c00f1c6c2f6e967a6b5b10af78 Mon Sep 17 00:00:00 2001
From: Anna Shamray <anna.shamray@maykinmedia.nl>
Date: Tue, 2 Jul 2024 12:47:37 +0200
Subject: [PATCH 1/2] :lipstick: [#150] fix help-text icon layout in the admin

---
 src/nrc/sass/admin/_admin_theme.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/nrc/sass/admin/_admin_theme.scss b/src/nrc/sass/admin/_admin_theme.scss
index 4d56f924..8f9cf3f2 100644
--- a/src/nrc/sass/admin/_admin_theme.scss
+++ b/src/nrc/sass/admin/_admin_theme.scss
@@ -170,7 +170,7 @@ div.help {
   background-size: 14px;
   margin-left: 8px !important;
   margin-top: 6px !important;
-  position: absolute;
+  position: relative;
   text-indent: -9999px;
 
   &:hover {
@@ -212,3 +212,7 @@ div.help {
   display: inline-block;
   margin-left: inherit !important;
 }
+
+div:has(> div.help ) {
+  display: flex;
+}
\ No newline at end of file

From ea7304def7a80a0624571ffb541c5e3239eb18cc Mon Sep 17 00:00:00 2001
From: Anna Shamray <anna.shamray@maykinmedia.nl>
Date: Tue, 2 Jul 2024 17:10:07 +0200
Subject: [PATCH 2/2] :lipstick: [#150] update css styling of help-text icon

---
 src/nrc/sass/admin/_admin_theme.scss | 56 ++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/nrc/sass/admin/_admin_theme.scss b/src/nrc/sass/admin/_admin_theme.scss
index 8f9cf3f2..0fd9a31b 100644
--- a/src/nrc/sass/admin/_admin_theme.scss
+++ b/src/nrc/sass/admin/_admin_theme.scss
@@ -162,32 +162,58 @@ div.breadcrumbs {
  */
 div.help {
   cursor: help;
-  width: 16px;
-  height: 16px;
+  block-size: 14px;
+  inline-size: 14px;
+
   background-image: url('../../admin/img/icon-unknown.svg');
-  display: inline-block;
   background-repeat: no-repeat;
   background-size: 14px;
   margin-left: 8px !important;
   margin-top: 6px !important;
-  position: relative;
-  text-indent: -9999px;
+  padding-inline: 0 !important;
+  padding-block: 0 !important;
+
+  position: relative; // provides an anchor for the nested div absolute positioning
+
+  // the actual content is nested in a div, so we can easily hide it by default
+  > div {
+    display: none;
+  }
 
+  // On hover of the icon, we display the real help text content.
   &:hover {
-    text-indent: inherit;
-    width: auto;
     background-image: none;
-    background-color: $color-tooltip-background;
-    border: 1px solid $color-tooltip-border;
-    color: $color-tooltip-text;
-    padding: 5px 5px 3px 5px !important;
-    max-width: 300px;
-    height: auto !important;
-    margin-top: 2px !important;
-    z-index: 10;
+
+    > div {
+      display: block;
+      position: absolute;
+      top: 1px;
+      z-index: 10;
+
+      block-size: auto;
+      inline-size: max-content;
+      max-inline-size: 300px;
+      padding-block: 5px 3px;
+      padding-inline: 5px 5px;
+
+      background-color: $color-tooltip-background;
+      border: 1px solid $color-tooltip-border;
+      color: $color-tooltip-text;
+    }
   }
 }
 
+/**
+ * Help text layout
+ */
+.form-row:has(.help) {
+  overflow: visible;
+}
+
+div:has(> div.help ) {
+  display: flex;
+}
+
 .related-widget-wrapper ~ div.help {
   margin-top: 8px !important;