From 4870157dbd880bf964b54378e318fbe3ff0b4a74 Mon Sep 17 00:00:00 2001
From: xpltd <dev@xpltd.co>
Date: Sun, 22 Mar 2026 17:10:59 -0500
Subject: [PATCH] Mobile header full-width + live theme preview on save
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  7 +++++++
 frontend/src/stores/theme.ts          | 12 +++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 59d5859..e3bec05 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/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;
diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
index 887f3ef..94be6a1 100644
--- a/frontend/src/stores/theme.ts
+++ b/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)
+    }
   }
 
   /**