From b513add15bc057b09b01f44d08303e09e6175df5 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 3 Jun 2026 10:15:02 -0400
Subject: [PATCH] Fix: mobile help TOC toggle via inline onclick,
 overflow/wrapping fixes

---
 frontend/index.html   |  6 +++---
 frontend/js/config.js |  5 -----
 frontend/style.css    | 23 ++++++++++++++++++++++-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 20a4c7d..bef8837 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -762,7 +762,7 @@
   <div class="editor-modal" id="help-modal">
     <div class="editor-container help-container">
       <div class="editor-header">
-        <button class="help-hamburger" id="help-hamburger" title="Sommaire" aria-label="Afficher le sommaire">
+        <button class="help-hamburger" id="help-hamburger" title="Sommaire" aria-label="Afficher le sommaire" onclick="var n=document.getElementById('help-nav');var o=document.getElementById('help-nav-overlay');if(n){n.classList.toggle('open');if(o)o.classList.toggle('visible');var s=document.getElementById('help-nav-search');if(n.classList.contains('open')&&s)setTimeout(function(){s.focus()},150);document.body.style.overflow=n.classList.contains('open')?'hidden':''}">
           <i data-lucide="menu" style="width:18px;height:18px"></i>
         </button>
         <div class="editor-title" id="help-title">Guide d'utilisation ObsiGate</div>
@@ -772,12 +772,12 @@
           </button>
         </div>
       </div>
-      <div class="help-nav-overlay" id="help-nav-overlay"></div>
+      <div class="help-nav-overlay" id="help-nav-overlay" onclick="var n=document.getElementById('help-nav');var o=document.getElementById('help-nav-overlay');if(n)n.classList.remove('open');if(o)o.classList.remove('visible');document.body.style.overflow=''"></div>
       <div class="editor-body help-body" id="help-body">
         <nav class="help-nav" id="help-nav">
           <div class="help-nav-header">
             <div class="help-nav-title">Sommaire</div>
-            <button class="help-nav-close" id="help-nav-close" title="Fermer" aria-label="Fermer le sommaire">
+            <button class="help-nav-close" id="help-nav-close" title="Fermer" aria-label="Fermer le sommaire" onclick="var n=document.getElementById('help-nav');var o=document.getElementById('help-nav-overlay');if(n)n.classList.remove('open');if(o)o.classList.remove('visible');document.body.style.overflow=''">
               <i data-lucide="x" style="width:16px;height:16px"></i>
             </button>
           </div>
diff --git a/frontend/js/config.js b/frontend/js/config.js
index bde3425..bb2590e 100644
--- a/frontend/js/config.js
+++ b/frontend/js/config.js
@@ -199,11 +199,6 @@ function initHelpModal() {
       initHelpNavigation();
       helpNavInitialized = true;
     }
-    // Focus search on open
-    const searchInput = document.getElementById("help-nav-search");
-    if (searchInput) {
-      setTimeout(() => searchInput.focus(), 100);
-    }
   });
 
   closeBtn.addEventListener("click", closeHelpModal);
diff --git a/frontend/style.css b/frontend/style.css
index fdc36a4..df333ed 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -2369,6 +2369,14 @@ select {
   color: var(--text-secondary);
   line-height: 1.7;
 }
+.help-content pre,
+.help-content table {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.help-content pre code {
+  white-space: pre;
+}
 .help-content ul,
 .help-content ol {
   margin: 10px 0 18px;
@@ -6473,21 +6481,34 @@ body.popup-mode .content-area {
   .help-body {
     flex-direction: column;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 0;
   }
   .help-content {
     padding: 14px 16px 40px;
     flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
+    word-break: break-word;
+  }
+  .help-content pre, .help-content code, .help-content table {
+    max-width: 100%;
+    overflow-x: auto;
   }
   .help-content:focus { outline: none; }
   .help-hero {
     flex-direction: column;
     gap: 16px;
+    min-width: 0;
+  }
+  .help-hero-copy { min-width: 0; }
+  .help-badges {
+    flex-wrap: wrap;
+    gap: 6px;
   }
   .help-hero-visual { display: none; }
-  .help-section { padding: 20px 0 16px; }
+  .help-section { padding: 20px 0 16px; min-width: 0; }
   .help-nav-link {
     padding: 10px 12px;
     font-size: 0.88rem;