doxa-life/doxa-maps-cdn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deep Research: the gallery's info dialog opens above the site header, so its title and close button show

Browse source 
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.
This commit is contained in:
driver 2026-09-29 20:28:16 +00:00
parent dc3382f017
commit 9297602224
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/pages/deep-research/index.vue
View file

@ -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>