fix(ui): lift theme popover out of header stacking context to appear above modals

static/css/components/header.css

@@ -329,16 +329,14 @@
 
 .theme-popover {
   display: none;
-  position: absolute;
-  top: calc(100% + 8px);
-  right: -8px;
+  position: fixed;
   background: var(--surface-base, #ffffff);
   border: 1px solid var(--border-base, #e0e0e0);
   border-radius: var(--radius-md, 8px);
   box-shadow: var(--shadow-xl, 0 4px 16px rgba(0, 0, 0, 0.15));
   padding: 12px;
   min-width: 220px;
-  z-index: var(--z-dropdown, 200);
+  z-index: calc(var(--z-overlay) + 1);
   animation: theme-popover-in 0.15s ease-out;
 }
 

static/js/components/Header.js

@@ -121,11 +121,11 @@ export class HeaderManager {
       this.updatePopoverActiveStates(currentTheme, currentPreset);
 
       themeToggle.addEventListener('click', (e) => {
-        if (e.target.closest('.theme-popover')) return;
         e.stopPropagation();
         const isOpen = themePopover.classList.contains('active');
         this.closeAllPopovers();
         if (!isOpen) {
+          this.positionThemePopover();
           themePopover.classList.add('active');
         }
       });
@@ -149,6 +149,13 @@ export class HeaderManager {
           themePopover.classList.remove('active');
         }
       });
+
+      // Reposition on resize while popover is active
+      window.addEventListener('resize', () => {
+        if (themePopover.classList.contains('active')) {
+          this.positionThemePopover();
+        }
+      });
     }
 
     closeAllPopovers() {
@@ -158,6 +165,17 @@ export class HeaderManager {
       }
     }
 
+    positionThemePopover() {
+      const themeToggle = document.querySelector('.theme-toggle');
+      const themePopover = document.getElementById('themePopover');
+      if (!themeToggle || !themePopover) return;
+      const rect = themeToggle.getBoundingClientRect();
+      // Guard: toggle may be hidden on narrow viewports (≤950px CSS hides .header-controls)
+      if (rect.width === 0 || rect.height === 0) return;
+      themePopover.style.top = (rect.bottom + 8) + 'px';
+      themePopover.style.right = (window.innerWidth - rect.right - 8) + 'px';
+    }
+
     setThemeMode(mode) {
       setStorageItem('theme', mode);
       const htmlElement = document.documentElement;

templates/components/header.html

@@ -72,7 +72,55 @@
           <i class="fas fa-moon dark-icon"></i>
           <i class="fas fa-sun light-icon"></i>
           <i class="fas fa-adjust auto-icon"></i>
-          <div class="theme-popover" id="themePopover">
+        </div>
+        <div class="settings-toggle" title="{{ t('common.actions.settings') }}">
+          <i class="fas fa-cog"></i>
+        </div>
+        <div class="help-toggle" id="helpToggleBtn" title="{{ t('common.actions.help') }}">
+          <i class="fas fa-question-circle"></i>
+          <span class="update-badge"></span>
+        </div>
+        <div class="update-toggle" id="updateToggleBtn" title="{{ t('header.actions.notifications') }}">
+          <i class="fas fa-bell"></i>
+          <span class="update-badge"></span>
+        </div>
+        <div class="support-toggle" id="supportToggleBtn" title="{{ t('header.actions.support') }}">
+          <i class="fas fa-heart"></i>
+        </div>
+      </div>
+      <!-- Hamburger menu button (visible on mobile) -->
+      <button class="hamburger-menu-btn" id="hamburgerMenuBtn" title="{{ t('common.actions.menu') }}">
+        <i class="fas fa-bars"></i>
+      </button>
+      <!-- Hamburger dropdown menu -->
+      <div class="hamburger-dropdown" id="hamburgerDropdown">
+        <div class="dropdown-item theme-toggle-item" data-action="theme">
+          <i class="fas fa-moon"></i>
+          <span>{{ t('header.theme.toggle') }}</span>
+        </div>
+        <div class="dropdown-item" data-action="settings">
+          <i class="fas fa-cog"></i>
+          <span>{{ t('common.actions.settings') }}</span>
+        </div>
+        <div class="dropdown-item" data-action="help">
+          <i class="fas fa-question-circle"></i>
+          <span>{{ t('common.actions.help') }}</span>
+        </div>
+        <div class="dropdown-item" data-action="notifications">
+          <i class="fas fa-bell"></i>
+          <span>{{ t('header.actions.notifications') }}</span>
+        </div>
+        <div class="dropdown-divider"></div>
+        <div class="dropdown-item" data-action="support">
+          <i class="fas fa-heart"></i>
+          <span>{{ t('header.actions.support') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+
+<div class="theme-popover" id="themePopover" role="dialog" aria-label="{{ t('header.theme.toggle') }}">
   <div class="theme-popover-section">
     <div class="theme-popover-label">{{ t('header.theme.mode') }}</div>
     <div class="theme-popover-modes">
@@ -121,53 +169,6 @@
     </div>
   </div>
 </div>
-        </div>
-        <div class="settings-toggle" title="{{ t('common.actions.settings') }}">
-          <i class="fas fa-cog"></i>
-        </div>
-        <div class="help-toggle" id="helpToggleBtn" title="{{ t('common.actions.help') }}">
-          <i class="fas fa-question-circle"></i>
-          <span class="update-badge"></span>
-        </div>
-        <div class="update-toggle" id="updateToggleBtn" title="{{ t('header.actions.notifications') }}">
-          <i class="fas fa-bell"></i>
-          <span class="update-badge"></span>
-        </div>
-        <div class="support-toggle" id="supportToggleBtn" title="{{ t('header.actions.support') }}">
-          <i class="fas fa-heart"></i>
-        </div>
-      </div>
-      <!-- Hamburger menu button (visible on mobile) -->
-      <button class="hamburger-menu-btn" id="hamburgerMenuBtn" title="{{ t('common.actions.menu') }}">
-        <i class="fas fa-bars"></i>
-      </button>
-      <!-- Hamburger dropdown menu -->
-      <div class="hamburger-dropdown" id="hamburgerDropdown">
-        <div class="dropdown-item theme-toggle-item" data-action="theme">
-          <i class="fas fa-moon"></i>
-          <span>{{ t('header.theme.toggle') }}</span>
-        </div>
-        <div class="dropdown-item" data-action="settings">
-          <i class="fas fa-cog"></i>
-          <span>{{ t('common.actions.settings') }}</span>
-        </div>
-        <div class="dropdown-item" data-action="help">
-          <i class="fas fa-question-circle"></i>
-          <span>{{ t('common.actions.help') }}</span>
-        </div>
-        <div class="dropdown-item" data-action="notifications">
-          <i class="fas fa-bell"></i>
-          <span>{{ t('header.actions.notifications') }}</span>
-        </div>
-        <div class="dropdown-divider"></div>
-        <div class="dropdown-item" data-action="support">
-          <i class="fas fa-heart"></i>
-          <span>{{ t('header.actions.support') }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</header>
 
 <!-- Add search options panel with context-aware options -->
 <div id="searchOptionsPanel" class="search-options-panel hidden">