Mobile header full-width + live theme preview on save

Header: remove max-width constraint on mobile so header background
spans the full viewport width.

Theme: updateAdminConfig now applies the new theme immediately if
the user's current mode matches the changed side (e.g. changing
dark theme while in dark mode updates live, without page reload
or dark→light→dark toggle).

frontend/src/components/AppHeader.vue

@@ -27,6 +27,7 @@ function goHome(): void {
   position: sticky;
   top: 0;
   z-index: 100;
+  width: 100%;
   height: var(--header-height);
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
@@ -44,6 +45,12 @@ function goHome(): void {
   align-items: center;
 }
 
+@media (max-width: 767px) {
+  .header-content {
+    max-width: none;
+  }
+}
+
 .header-title {
   font-size: var(--font-size-xl);
   font-weight: 700;

frontend/src/stores/theme.ts

@@ -115,12 +115,22 @@ export const useThemeStore = defineStore('theme', () => {
   }
 
   /**
-   * Update admin theme config (called after saving settings).
+   * Update admin theme config and apply if current mode matches.
+   * Called after saving settings — gives live preview without page reload.
    */
   function updateAdminConfig(darkTheme: string, lightTheme: string, defaultMode: 'dark' | 'light'): void {
     adminDarkTheme.value = darkTheme
     adminLightTheme.value = lightTheme
     adminDefaultMode.value = defaultMode
+
+    // Apply the new theme if user's current mode matches the changed side
+    if (currentMode.value === 'dark') {
+      currentTheme.value = darkTheme
+      _apply(darkTheme)
+    } else {
+      currentTheme.value = lightTheme
+      _apply(lightTheme)
+    }
   }
 
   /**