Fix: enforce display:flex on login-screen and app-screen to prevent layout breaking on logout/login

public/assets/app.js

@@ -67,6 +67,36 @@ function escapeHtml(str) {
         .replace(/'/g, ''');
 }
 
+// --- Bascule propre des écrans Login / Dashboard ---
+function showLoginScreen() {
+    stopMetricsPolling();
+    const appScreen = document.getElementById('app-screen');
+    const loginScreen = document.getElementById('login-screen');
+    if (appScreen) {
+        appScreen.classList.add('hidden');
+        appScreen.classList.remove('flex');
+    }
+    if (loginScreen) {
+        loginScreen.classList.remove('hidden');
+        loginScreen.classList.add('flex');
+    }
+    window.scrollTo(0, 0);
+}
+
+function showAppScreen() {
+    const loginScreen = document.getElementById('login-screen');
+    const appScreen = document.getElementById('app-screen');
+    if (loginScreen) {
+        loginScreen.classList.add('hidden');
+        loginScreen.classList.remove('flex');
+    }
+    if (appScreen) {
+        appScreen.classList.remove('hidden');
+        appScreen.classList.add('flex');
+    }
+    window.scrollTo(0, 0);
+}
+
 // --- Client AJAX Fetch API ---
 async function apiCall(action, payload = null) {
     const options = {
@@ -92,9 +122,7 @@ async function apiCall(action, payload = null) {
     }
 
     if (res.status === 401 && data.unauthenticated) {
-        stopMetricsPolling();
+        showLoginScreen();
-        document.getElementById('app-screen').classList.add('hidden');
-        document.getElementById('login-screen').classList.remove('hidden');
         throw new Error(data.message || 'Session expirée');
     }
 
@@ -3266,8 +3294,7 @@ document.addEventListener('DOMContentLoaded', () => {
         try {
             const res = await apiCall('login', formData);
             showToast(res.message, 'success');
-            document.getElementById('login-screen').classList.add('hidden');
+            showAppScreen();
-            document.getElementById('app-screen').classList.remove('hidden');
             await loadState();
         } catch (err) {
             showToast(err.message, 'error');
@@ -3276,10 +3303,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Logout AJAX
     document.getElementById('btn-logout')?.addEventListener('click', async () => {
-        stopMetricsPolling();
         await apiCall('logout', {});
-        document.getElementById('app-screen').classList.add('hidden');
+        showLoginScreen();
-        document.getElementById('login-screen').classList.remove('hidden');
         showToast('Vous êtes déconnecté.', 'info');
     });
 

public/index.php

@@ -118,6 +118,20 @@ $currentUser = Auth::getUsername();
             border-color: #6366f1 !important;
             box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4) !important;
         }
+
+        /* 5. Layout flex garanti pour les écrans login et dashboard */
+        #login-screen:not(.hidden) {
+            display: flex !important;
+        }
+        #login-screen.hidden {
+            display: none !important;
+        }
+        #app-screen:not(.hidden) {
+            display: flex !important;
+        }
+        #app-screen.hidden {
+            display: none !important;
+        }
     </style>
 </head>
 <body class="min-h-screen w-full bg-anthracite-900 text-slate-100 antialiased selection:bg-indigo-500 selection:text-white">