From 127658aefd5f2f88da8b2d025834785797e0463a Mon Sep 17 00:00:00 2001
From: David Blanc Brioir <davidblancbrioir@gmail.com>
Date: Tue, 30 Dec 2025 19:12:19 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20UI:=20header=20fixe=20et=20?=
 =?UTF-8?q?ajustement=20layout=20chat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header fixe positionné à côté du menu hamburger (80px de gauche)
- Suppression du sous-titre "Visualiseur de base Weaviate"
- Fix variable CSS: var(--color-bg-primary) → var(--color-bg-main)
- Ajustement hauteur chat: fenêtres RAG descendent jusqu'en bas
- Barres de conversation touchent le bas de l'écran

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 generations/library_rag/templates/base.html | 52 ++++++++++++---------
 generations/library_rag/templates/chat.html | 14 ++++--
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/generations/library_rag/templates/base.html b/generations/library_rag/templates/base.html
index 436d691..65f1618 100644
--- a/generations/library_rag/templates/base.html
+++ b/generations/library_rag/templates/base.html
@@ -56,11 +56,15 @@
             max-width: var(--max-content-width);
             margin: 0 auto;
             padding: 1.5rem 1.5rem;
+            padding-top: 90px; /* Espace pour le header fixe */
+            padding-left: calc(1rem + 48px + 1rem); /* Aligner avec le header */
         }
 
         @media (min-width: 992px) {
             .wrapper {
                 padding: 2.5rem 3rem;
+                padding-top: 90px; /* Conserver l'espace pour le header fixe */
+                padding-left: calc(1rem + 48px + 1rem); /* Aligner avec le header */
             }
         }
 
@@ -322,10 +326,15 @@
 
         /* Header */
         .site-header {
-            padding: 1.5rem 0;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 1.5rem 1.5rem;
+            padding-left: calc(1rem + 48px + 1rem); /* left menu (1rem) + width (48px) + marge (1rem) = 80px */
             border-bottom: 1px solid rgba(0, 0, 0, 0.04);
-            margin-bottom: 1.5rem;
-            margin-left: 64px; /* Space for hamburger button */
+            background-color: var(--color-bg-main);
+            z-index: 100;
         }
 
         .site-title {
@@ -712,27 +721,26 @@
         </div>
     </nav>
 
-    <div class="wrapper">
-        <!-- Header -->
-        <header class="site-header">
-            <div class="header-inner">
-                <div>
-                    <a href="/" style="text-decoration: none;">
-                        <div class="site-title">Philosophia</div>
-                        <div class="site-subtitle">Visualiseur de base Weaviate</div>
-                    </a>
-                </div>
-                <nav class="nav-links">
-                    <a href="/" class="{{ 'active' if request.endpoint == 'index' else '' }}">Accueil</a>
-                    <a href="/passages" class="{{ 'active' if request.endpoint == 'passages' else '' }}">Passages</a>
-                    <a href="/search" class="{{ 'active' if request.endpoint == 'search' else '' }}">Recherche</a>
-                    <a href="/chat" class="{{ 'active' if request.endpoint == 'chat' else '' }}">Conversation</a>
-                    <a href="/upload" class="{{ 'active' if request.endpoint == 'upload' else '' }}">Parser PDF</a>
-                    <a href="/documents" class="{{ 'active' if request.endpoint == 'documents' else '' }}">Documents</a>
-                </nav>
+    <!-- Header -->
+    <header class="site-header">
+        <div class="header-inner">
+            <div>
+                <a href="/" style="text-decoration: none;">
+                    <div class="site-title">Philosophia</div>
+                </a>
             </div>
-        </header>
+            <nav class="nav-links">
+                <a href="/" class="{{ 'active' if request.endpoint == 'index' else '' }}">Accueil</a>
+                <a href="/passages" class="{{ 'active' if request.endpoint == 'passages' else '' }}">Passages</a>
+                <a href="/search" class="{{ 'active' if request.endpoint == 'search' else '' }}">Recherche</a>
+                <a href="/chat" class="{{ 'active' if request.endpoint == 'chat' else '' }}">Conversation</a>
+                <a href="/upload" class="{{ 'active' if request.endpoint == 'upload' else '' }}">Parser PDF</a>
+                <a href="/documents" class="{{ 'active' if request.endpoint == 'documents' else '' }}">Documents</a>
+            </nav>
+        </div>
+    </header>
 
+    <div class="wrapper">
         <!-- Main Content -->
         <main>
             {% block content %}{% endblock %}
diff --git a/generations/library_rag/templates/chat.html b/generations/library_rag/templates/chat.html
index 7f5636c..6c69bf2 100644
--- a/generations/library_rag/templates/chat.html
+++ b/generations/library_rag/templates/chat.html
@@ -18,9 +18,15 @@
         }
     }
 
-    /* Remove header margin for full-width layout */
+    /* Keep header fixed but adjust for chat full-width layout */
     .site-header {
-        margin-left: 0 !important;
+        padding-left: calc(1rem + 48px + 1rem) !important; /* Clear hamburger menu */
+    }
+
+    @media (min-width: 992px) {
+        .site-header {
+            padding-left: calc(1rem + 48px + 1rem) !important;
+        }
     }
 
     /* Chat-specific styles */
@@ -28,7 +34,7 @@
         display: grid;
         grid-template-columns: 60% 40%;
         gap: 1.5rem;
-        height: calc(100vh - 300px);
+        height: calc(100vh - 90px - 1.5rem);
         min-height: 600px;
         width: 100%;
     }
@@ -49,6 +55,7 @@
     .chat-main {
         display: flex;
         flex-direction: column;
+        height: 100%;
         background-color: rgba(255, 255, 255, 0.06);
         border-radius: 12px;
         border: 1px solid rgba(125, 110, 88, 0.25);
@@ -258,6 +265,7 @@
     .context-sidebar {
         display: flex;
         flex-direction: column;
+        height: 100%;
         background-color: rgba(255, 255, 255, 0.06);
         border-radius: 12px;
         border: 1px solid rgba(125, 110, 88, 0.25);