From ca84bfdf11e08a5bc5f1739f7174169914e366dc Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sat, 30 May 2026 08:48:35 -0400
Subject: [PATCH] =?UTF-8?q?style:=20header=20graph=202=20lignes=20responsi?=
 =?UTF-8?q?ves=20=E2=80=94=20titre=20flexible=20+=20recherche=20d=C3=A9di?=
 =?UTF-8?q?=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html | 46 +++++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 645c55d..4ca9b2a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -700,29 +700,31 @@
   <!-- Graph View Modal -->
   <div class="editor-modal" id="graph-modal">
     <div class="editor-container" style="max-width:95vw;width:1000px;height:85vh;display:flex;flex-direction:column;">
-      <!-- Header: 3 zones — titre | recherche | contrôles -->
-      <div class="editor-header" style="display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border-color)">
-        <div class="editor-title" id="graph-title" style="font-weight:600;font-size:0.9rem;white-space:nowrap;flex-shrink:0;min-width:0;overflow:hidden;text-overflow:ellipsis">Vue Graphique</div>
-        <button class="editor-btn" id="graph-nav-back" title="Retour" style="font-size:0.75rem;padding:2px 4px;opacity:0.5;flex-shrink:0" disabled>←</button>
-        <button class="editor-btn" id="graph-nav-fwd" title="Avancer" style="font-size:0.75rem;padding:2px 4px;opacity:0.5;flex-shrink:0" disabled>→</button>
-        <button class="editor-btn" id="graph-nav-up" title="Dossier parent" style="font-size:0.7rem;padding:2px 6px;flex-shrink:0;display:none">↑ Parent</button>
-        <div style="flex:1;display:flex;justify-content:center">
-          <div style="position:relative;width:100%;max-width:400px">
-            <i data-lucide="search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted);pointer-events:none"></i>
-            <input type="text" id="graph-search" placeholder="Rechercher ou #tag..." style="width:100%;font-size:0.8rem;padding:6px 12px 6px 32px;border-radius:8px;border:none;background:var(--bg-secondary);color:var(--text-primary);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)">
-            <span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:0.6rem;color:var(--text-muted);opacity:0.5;pointer-events:none">Ctrl+survol</span>
-          </div>
+      <!-- Header: 2 lignes — nav+titre+contrôles | recherche -->
+      <div class="editor-header" style="display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border-color)">
+        <!-- Line 1: nav + title + controls -->
+        <div style="display:flex;align-items:center;gap:6px;min-width:0">
+          <button class="editor-btn" id="graph-nav-back" title="Retour" style="font-size:0.75rem;padding:2px 4px;opacity:0.3;flex-shrink:0;min-width:22px" disabled>←</button>
+          <button class="editor-btn" id="graph-nav-fwd" title="Avancer" style="font-size:0.75rem;padding:2px 4px;opacity:0.3;flex-shrink:0;min-width:22px" disabled>→</button>
+          <button class="editor-btn" id="graph-nav-up" title="Dossier parent" style="font-size:0.65rem;padding:2px 5px;flex-shrink:0;display:none">↑</button>
+          <div class="editor-title" id="graph-title" style="font-weight:600;font-size:0.85rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Vue Graphique</div>
+          <button class="editor-btn" id="graph-full-vault" title="Vue complète du vault" style="font-size:0.65rem;padding:3px 6px;flex-shrink:0">🌐 Tout</button>
+          <span style="font-size:0.6rem;color:var(--text-muted);flex-shrink:0">Prof.</span>
+          <input type="range" id="graph-depth" min="0" max="3" value="1" style="width:40px;flex-shrink:0" title="Profondeur">
+          <button class="editor-btn" id="graph-zoom-out" title="Zoom arrière" style="flex-shrink:0"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>
+          <button class="editor-btn" id="graph-zoom-in" title="Zoom avant" style="flex-shrink:0"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>
+          <button class="editor-btn" id="graph-reset" title="Réinitialiser" style="flex-shrink:0"><i data-lucide="maximize" style="width:14px;height:14px"></i></button>
+          <button class="editor-btn" id="graph-export" title="Exporter PNG" style="flex-shrink:0"><i data-lucide="download" style="width:14px;height:14px"></i></button>
+          <button class="editor-btn" id="graph-fullscreen" title="Plein écran" style="flex-shrink:0"><i data-lucide="expand" style="width:14px;height:14px"></i></button>
+          <button class="editor-btn" id="graph-close" title="Fermer" style="flex-shrink:0"><i data-lucide="x" style="width:15px;height:15px"></i></button>
         </div>
-        <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
-          <button class="editor-btn" id="graph-full-vault" title="Vue complète du vault" style="font-size:0.7rem;padding:4px 8px">🌐 Tout</button>
-          <span style="font-size:0.65rem;color:var(--text-muted);margin:0 2px">Prof.</span>
-          <input type="range" id="graph-depth" min="0" max="3" value="1" style="width:50px" title="Profondeur">
-          <button class="editor-btn" id="graph-zoom-out" title="Zoom arrière"><i data-lucide="zoom-out" style="width:15px;height:15px"></i></button>
-          <button class="editor-btn" id="graph-zoom-in" title="Zoom avant"><i data-lucide="zoom-in" style="width:15px;height:15px"></i></button>
-          <button class="editor-btn" id="graph-reset" title="Réinitialiser"><i data-lucide="maximize" style="width:15px;height:15px"></i></button>
-          <button class="editor-btn" id="graph-export" title="Exporter PNG"><i data-lucide="download" style="width:15px;height:15px"></i></button>
-          <button class="editor-btn" id="graph-fullscreen" title="Plein écran"><i data-lucide="expand" style="width:15px;height:15px"></i></button>
-          <button class="editor-btn" id="graph-close" title="Fermer"><i data-lucide="x" style="width:16px;height:16px"></i></button>
+        <!-- Line 2: centered search -->
+        <div style="display:flex;justify-content:center">
+          <div style="position:relative;width:100%;max-width:450px">
+            <i data-lucide="search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted);pointer-events:none"></i>
+            <input type="text" id="graph-search" placeholder="Rechercher ou #tag..." style="width:100%;font-size:0.78rem;padding:5px 12px 5px 30px;border-radius:8px;border:none;background:var(--bg-secondary);color:var(--text-primary);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)">
+            <span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:0.6rem;color:var(--text-muted);opacity:0.4;pointer-events:none">Ctrl+survol</span>
+          </div>
         </div>
       </div>
       <div class="editor-body" style="flex:1;overflow:hidden;position:relative;padding:0">