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>