From 929760222495f4c1d650f13cc8266d0b640f120f Mon Sep 17 00:00:00 2001
From: driver <driver@lk10x>
Date: Tue, 29 Sep 2026 20:28:16 +0000
Subject: [PATCH] Deep Research: the gallery's info dialog opens above the site
 header, so its title and close button show

rega's phone check (390 px) found the gallery's "What can this map do for you?" dialog with its title
and close button hidden under DX Life's header. The header is z-index 1500 (blocks/_header.scss) and
the dialog is a full-viewport layer at z-index 1000, full-screen below 600 px, so its top sat under
the header. On desktop a tall dialog (up to 88vh, centred) can reach under it too.

While the gallery is shown, <html> carries rg-gallery-mounted and .header drops to z-index 999, just
under the dialog. Nothing else changes: the header's nav has no dropdowns, and the mobile menu sits
outside .header at its own level. Only the Deep Research page sets the class, and it removes it on
leave.
---
 app/pages/deep-research/index.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/pages/deep-research/index.vue b/app/pages/deep-research/index.vue
index 93a0a13f..c6a2f1fe 100644
--- a/app/pages/deep-research/index.vue
+++ b/app/pages/deep-research/index.vue
@@ -50,6 +50,8 @@ onMounted(() => {
   // The gallery is sized to the viewport below the header; a sub-pixel header height must not add a
   // page scrollbar, so the page does not scroll while the gallery is shown.
   document.documentElement.classList.add('rg-no-page-scroll')
+  // The gallery's overlays (its info dialog) must open above the site header; see the style below.
+  document.documentElement.classList.add('rg-gallery-mounted')
   const header = document.getElementById('masthead')
   if (header && 'ResizeObserver' in window) {
     resizeObs = new ResizeObserver(fitBelowHeader)
@@ -82,6 +84,7 @@ watch(locale, (lang) => {
 
 onBeforeUnmount(() => {
   document.documentElement.classList.remove('rg-no-page-scroll')
+  document.documentElement.classList.remove('rg-gallery-mounted')
   resizeObs?.disconnect()
   gallery?.remove()
   gallery = null
@@ -127,4 +130,13 @@ html.rg-no-page-scroll,
 html.rg-no-page-scroll body {
   overflow: hidden;
 }
+
+/* The site header is z-index 1500 (blocks/_header.scss); the gallery's info dialog is a full-viewport
+   layer at z-index 1000, full-screen on a phone, so the header covered the dialog's title and close
+   button there. While the gallery is shown, the header sits just under the dialog: 999 still keeps it,
+   and its dropdowns, above the gallery's ordinary content. The mobile menu is outside .header and
+   keeps its own level. */
+html.rg-gallery-mounted .header {
+  z-index: 999;
+}
 </style>