From 26e27fd24bf24832baac071b2fc2a6791ff3f654 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Fri, 19 Jun 2026 12:52:48 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20code=20mirror=20lint=20to?=
 =?UTF-8?q?oltip=20format=20issues=20(#3325)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 | 10 ++++++++--
 ui/admin/app/styles/app.scss                           |  6 +++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/admin/app/components/form/role/edit-grants/index.js b/ui/admin/app/components/form/role/edit-grants/index.js
index b4d64dc82..d8936d651 100644
--- a/ui/admin/app/components/form/role/edit-grants/index.js
+++ b/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)
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index b56e2ac6c..bfa6db123 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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;
 }