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

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;
+}