Merge pull request #168 from open-zaak/issue/150-help-text-admin

💄 [#150] fix help-text icon layout in the admin

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: absolute;
-  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;
 
@@ -212,3 +238,7 @@ div.help {
   display: inline-block;
   margin-left: inherit !important;
 }
+
+div:has(> div.help ) {
+  display: flex;
+}