Amélioration UI: header fixe et ajustement layout chat

- 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>
This commit is contained in:
2025-12-30 19:12:19 +01:00
parent d91abd3566
commit 127658aefd
2 changed files with 41 additions and 25 deletions

View File

@@ -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 %}

View File

@@ -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);