diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js index 30341776..85b09182 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js @@ -750,8 +750,9 @@ function elementById(id) { const overflowOrder = [".operator-layout-picker", ".header-style-pick", "#theme-toggle"]; function anchorMenu(button, menu) { const rect = button.getBoundingClientRect(); + if (menu.parentElement !== document.body) document.body.appendChild(menu); menu.style.position = "fixed"; - menu.style.zIndex = "200"; + menu.style.zIndex = "9700"; menu.style.top = "0px"; menu.style.bottom = "auto"; menu.style.right = "auto"; @@ -798,7 +799,11 @@ function elementById(id) { if (open) anchorMenu(button, menu); }); document.addEventListener("click", (event) => { - if (!(event.target instanceof Node) || !wrap.contains(event.target)) closeMenu(); + if (!(event.target instanceof Node)) { + closeMenu(); + return; + } + if (!wrap.contains(event.target) && !menu.contains(event.target)) closeMenu(); }); document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeMenu(); diff --git a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts index 45285c14..84b3fdc7 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts +++ b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts @@ -334,8 +334,14 @@ function elementById(id: string): T { // edge. function anchorMenu(button: HTMLElement, menu: HTMLElement) { const rect = button.getBoundingClientRect(); + // Reparent to the body. Fixed positioning escapes clipping but not + // stacking: the header sets `z-index: 2`, which makes it a stacking + // context, so any z-index the menu carries is confined below every panel + // that paints above level 2 — the spectrum overlays reach 9600. Only + // leaving that subtree lets the menu sit above the page. + if (menu.parentElement !== document.body) document.body.appendChild(menu); menu.style.position = "fixed"; - menu.style.zIndex = "200"; + menu.style.zIndex = "9700"; menu.style.top = "0px"; menu.style.bottom = "auto"; // The stylesheet pins these menus to the right of their anchor; leaving @@ -386,7 +392,8 @@ function elementById(id: string): T { if (open) anchorMenu(button, menu); }); document.addEventListener("click", (event) => { - if (!(event.target instanceof Node) || !wrap.contains(event.target)) closeMenu(); + if (!(event.target instanceof Node)) { closeMenu(); return; } + if (!wrap.contains(event.target) && !menu.contains(event.target)) closeMenu(); }); document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeMenu(); });