From 6c3a2cd701815fd1ade55aa9ff0408edd57173bc Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 25 Mar 2026 11:40:34 +0000
Subject: [PATCH] Always apply saved full-width mode after auth (#1130)

---
 frontend-modern/src/App.tsx         | 24 +++++++++++++++---------
 frontend-modern/src/utils/layout.ts | 21 +++++++++++++--------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index 368e19576..965b18226 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -614,8 +614,7 @@ function App() {
               }
             }
             setHasLoadedServerTheme(true);
-            // Also load full-width mode from server
-            layoutStore.loadFromServer();
+            layoutStore.applyServerMode(systemSettings.fullWidthMode);
           } catch (error) {
             logger.error('Failed to load theme from server', error);
             // Ensure settings are marked as loaded so UI doesn't stay in loading state
@@ -625,7 +624,10 @@ function App() {
           setHasLoadedServerTheme(true);
           // Still load system settings for other features (Docker update actions, etc.)
           SettingsAPI.getSystemSettings()
-            .then((settings) => updateSystemSettingsFromResponse(settings))
+            .then((settings) => {
+              updateSystemSettingsFromResponse(settings);
+              layoutStore.applyServerMode(settings.fullWidthMode);
+            })
             .catch((error) => {
               logger.warn('Failed to load system settings', error);
               markSystemSettingsLoadedWithDefaults();
@@ -675,8 +677,7 @@ function App() {
               }
             }
             setHasLoadedServerTheme(true);
-            // Also load full-width mode from server
-            layoutStore.loadFromServer();
+            layoutStore.applyServerMode(systemSettings.fullWidthMode);
           } catch (error) {
             logger.error('Failed to load theme from server', error);
             // Ensure settings are marked as loaded so UI doesn't stay in loading state
@@ -686,7 +687,10 @@ function App() {
           setHasLoadedServerTheme(true);
           // Still load system settings for other features (Docker update actions, etc.)
           SettingsAPI.getSystemSettings()
-            .then((settings) => updateSystemSettingsFromResponse(settings))
+            .then((settings) => {
+              updateSystemSettingsFromResponse(settings);
+              layoutStore.applyServerMode(settings.fullWidthMode);
+            })
             .catch((error) => {
               logger.warn('Failed to load system settings', error);
               markSystemSettingsLoadedWithDefaults();
@@ -747,8 +751,7 @@ function App() {
               }
             }
             setHasLoadedServerTheme(true);
-            // Also load full-width mode from server
-            layoutStore.loadFromServer();
+            layoutStore.applyServerMode(systemSettings.fullWidthMode);
           } catch (error) {
             logger.error('Failed to load theme from server', error);
             // Ensure settings are marked as loaded so UI doesn't stay in loading state
@@ -759,7 +762,10 @@ function App() {
           setHasLoadedServerTheme(true);
           // Still load system settings for other features (Docker update actions, etc.)
           SettingsAPI.getSystemSettings()
-            .then((settings) => updateSystemSettingsFromResponse(settings))
+            .then((settings) => {
+              updateSystemSettingsFromResponse(settings);
+              layoutStore.applyServerMode(settings.fullWidthMode);
+            })
             .catch((error) => {
               logger.warn('Failed to load system settings', error);
               // Ensure settings are marked as loaded so UI doesn't stay in loading state
diff --git a/frontend-modern/src/utils/layout.ts b/frontend-modern/src/utils/layout.ts
index 2580344f4..c8296fde6 100644
--- a/frontend-modern/src/utils/layout.ts
+++ b/frontend-modern/src/utils/layout.ts
@@ -12,7 +12,7 @@ export type LayoutMode = 'default' | 'full-width';
  * Creates a reactive store for layout mode preference
  * Syncs with both localStorage (for immediate access) and server (for persistence across updates)
  */
-function createLayoutStore() {
+export function createLayoutStore() {
     const stored = localStorage.getItem(STORAGE_KEYS.FULL_WIDTH_MODE);
     const initialMode: LayoutMode = stored === 'full-width' ? 'full-width' : 'default';
 
@@ -38,6 +38,16 @@ function createLayoutStore() {
 
     const isFullWidth = () => mode() === 'full-width';
 
+    const applyServerMode = (serverFullWidthMode: boolean | undefined) => {
+        if (serverFullWidthMode !== undefined) {
+            const serverMode: LayoutMode = serverFullWidthMode ? 'full-width' : 'default';
+            localStorage.setItem(STORAGE_KEYS.FULL_WIDTH_MODE, serverMode);
+            setModeInternal(serverMode);
+            logger.debug('Applied full-width mode from server', { mode: serverMode });
+        }
+        setHasLoadedFromServer(true);
+    };
+
     /**
      * Load full-width preference from server (called after auth)
      * Always uses server preference after auth to keep localStorage in sync
@@ -50,13 +60,7 @@ function createLayoutStore() {
 
         try {
             const settings = await SettingsAPI.getSystemSettings();
-            if (settings.fullWidthMode !== undefined) {
-                const serverMode: LayoutMode = settings.fullWidthMode ? 'full-width' : 'default';
-                localStorage.setItem(STORAGE_KEYS.FULL_WIDTH_MODE, serverMode);
-                setModeInternal(serverMode);
-                logger.debug('Loaded full-width mode from server', { mode: serverMode });
-            }
-            setHasLoadedFromServer(true);
+            applyServerMode(settings.fullWidthMode);
         } catch (error) {
             logger.warn('Failed to load full-width mode from server', error);
         }
@@ -67,6 +71,7 @@ function createLayoutStore() {
         setMode,
         toggle,
         isFullWidth,
+        applyServerMode,
         loadFromServer,
     };
 }