petit responsive ++ correction editeur de texte

src/app/project/[id]/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useRouter, usePathname } from 'next/navigation';
 import { useAuthContext } from '@/providers/AuthProvider';
 import { ProjectProvider } from '@/providers/ProjectProvider';
@@ -27,6 +27,7 @@ export default function ProjectLayout({ children }: { children: React.ReactNode
     const projectId = params.id as string;
 
     const { user, logout, incrementUsage, loading: authLoading } = useAuthContext();
+    const hasEverLoaded = useRef(false);
     const {
         projects, setCurrentProjectId,
         updateProject, updateChapter, addChapter,
@@ -40,6 +41,13 @@ export default function ProjectLayout({ children }: { children: React.ReactNode
 
     const viewMode = getViewModeFromPath(pathname);
 
+    // Track when auth has loaded at least once to avoid unmounting on session refresh
+    useEffect(() => {
+        if (!authLoading && user) {
+            hasEverLoaded.current = true;
+        }
+    }, [authLoading, user]);
+
     useEffect(() => {
         if (projectId) setCurrentProjectId(projectId);
     }, [projectId, setCurrentProjectId]);
@@ -56,7 +64,8 @@ export default function ProjectLayout({ children }: { children: React.ReactNode
         }
     }, [project, currentChapterId]);
 
-    if (authLoading || !user) {
+    // Only show loading spinner on INITIAL load, not during session refreshes (tab switch)
+    if (!hasEverLoaded.current && (authLoading || !user)) {
         return (
             <div className="h-screen w-full flex flex-col items-center justify-center bg-slate-900 text-white">
                 <Loader2 className="animate-spin text-blue-500 mb-4" size={48} />