From 33ad75d571463084e7f2a07c914163fa0f596f96 Mon Sep 17 00:00:00 2001
From: sorcier <sorcier@sorcier-research.com>
Date: Mon, 2 Nov 2026 15:53:20 +0100
Subject: [PATCH] Fix: enforce display:flex on login-screen and app-screen to
 prevent layout breaking on logout/login

---
 public/assets/app.js | 41 +++++++++++++++++++++++++++++++++--------
 public/index.php     | 14 ++++++++++++++
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/public/assets/app.js b/public/assets/app.js
index f5f29f6..4461a9a 100644
--- a/public/assets/app.js
+++ b/public/assets/app.js
@@ -67,6 +67,36 @@ function escapeHtml(str) {
         .replace(/'/g, '&#039;');
 }
 
+// --- 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();
-        document.getElementById('app-screen').classList.add('hidden');
-        document.getElementById('login-screen').classList.remove('hidden');
+        showLoginScreen();
         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');
-            document.getElementById('app-screen').classList.remove('hidden');
+            showAppScreen();
             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');
-        document.getElementById('login-screen').classList.remove('hidden');
+        showLoginScreen();
         showToast('Vous êtes déconnecté.', 'info');
     });
 
diff --git a/public/index.php b/public/index.php
index 5bbe7f2..c589175 100644
--- a/public/index.php
+++ b/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">