fix: 🐛 code mirror lint tooltip format issues (#3325)

* fix: 🐛 code mirror lint tooltip format issues

* refactor: 💡 add fallback for parent config

* refactor: 💡 use getOwner to retrieve actual app root element

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

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

ui/admin/app/styles/app.scss

@@ -1043,8 +1043,8 @@
   overflow-y: auto;
 }
 
-// Prevent grants editor autocomplete tooltip from
-// being hidden by code editor in fullscreen mode.
-.rose-layout-page div .cm-tooltip-autocomplete {
+// Prevent grants editor tooltip from being
+// hidden by code editor in fullscreen mode.
+.ember-application div .cm-tooltip {
   z-index: 1000;
 }