Use codemirror tooltip extension to set parent to fix positioning bug (#3323)

* fix: 🐛 absolute positioning of cm tooltip in firefox

* docs: ✏️ add comment

* fix: 🐛 tooltip hidden in editor fullscreen mode & dark mode

* fix: 🐛 tooltip color in dark mode

* docs: ✏️ add comment

addons/rose/addon/styles/hds/themes/dark-mode/index.scss

@@ -203,30 +203,30 @@
 // Overrides for CodeMirror 6 autocomplete and lint tooltips/panels.
 @mixin dark-mode-codemirror-override {
   /* stylelint-disable selector-class-pattern */
+  // Autocomplete dropdown and lint hover tooltips
+  .cm-tooltip {
+    background-color: var(--token-color-palette-neutral-50);
+    border: 1px solid var(--token-color-palette-neutral-100);
+    color: var(--token-color-palette-neutral-400);
+  }
+
+  // Arrow pointer for tooltips shown above the cursor
+  .cm-tooltip-above::before {
+    border-top-color: var(--token-color-palette-neutral-50);
+  }
+
+  // Arrow pointer for tooltips shown below the cursor
+  .cm-tooltip-below::before {
+    border-bottom-color: var(--token-color-palette-neutral-50);
+  }
+
+  // Autocomplete list > selected item highlight
+  .cm-tooltip-autocomplete > ul > li[aria-selected] {
+    background-color: var(--token-color-palette-blue-300);
+    color: var(--token-color-palette-neutral-700);
+  }
+
   .cm-editor {
-    // Autocomplete dropdown and lint hover tooltips
-    .cm-tooltip {
-      background-color: var(--token-color-palette-neutral-50);
-      border: 1px solid var(--token-color-palette-neutral-100);
-      color: var(--token-color-palette-neutral-400);
-    }
-
-    // Arrow pointer for tooltips shown above the cursor
-    .cm-tooltip-above::before {
-      border-top-color: var(--token-color-palette-neutral-50);
-    }
-
-    // Arrow pointer for tooltips shown below the cursor
-    .cm-tooltip-below::before {
-      border-bottom-color: var(--token-color-palette-neutral-50);
-    }
-
-    // Autocomplete list > selected item highlight
-    .cm-tooltip-autocomplete > ul > li[aria-selected] {
-      background-color: var(--token-color-palette-blue-300);
-      color: var(--token-color-palette-neutral-700);
-    }
-
     // Content/gutter border
     .cm-content {
       border-left: 1px solid var(--token-color-palette-neutral-100);

ui/admin/app/components/form/role/edit-grants/index.js

@@ -8,6 +8,7 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import {
+  tooltips,
   autocompletion,
   completionKeymap,
   startCompletion,
@@ -169,6 +170,8 @@ export default class FormRoleEditGrantsComponent extends Component {
   );
 
   customExtensions = [
+    // Configure tooltips to render in page layout to avoid overflow issues within the editor container.
+    tooltips({ parent: document.querySelector('.rose-layout-page') }),
     autocompletion({
       override: [this.completionSource],
       // Trigger autocompletion when the user completes a grant field (which we labeled as keywords)

ui/admin/app/styles/app.scss

@@ -1042,3 +1042,9 @@
   max-height: 50vh;
   overflow-y: auto;
 }
+
+// Prevent grants editor autocomplete tooltip from
+// being hidden by code editor in fullscreen mode.
+.rose-layout-page div .cm-tooltip-autocomplete {
+  z-index: 1000;
+}