From 1cab6dfeb652d974fa1ca7ea71fbc7e0c4621f81 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Thu, 14 Aug 2025 16:25:53 +0000
Subject: [PATCH] Update web/templates/search.html

trying to move the help tips to below the search row
---
 web/templates/search.html | 58 +++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/web/templates/search.html b/web/templates/search.html
index d7c374f..888ddcf 100644
--- a/web/templates/search.html
+++ b/web/templates/search.html
@@ -46,37 +46,35 @@
     <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
     <button class="btn btn-primary">Search</button>
 
-    <!-- Help Button inline -->
-    <div class="search-help-inline">
-      <button class="btn btn-secondary help-toggle" type="button"
-              onclick="this.nextElementSibling.classList.toggle('open')">
-        Help
-      </button>
-      <div class="help-content">
-        <h3>How to Use Search Operators</h3>
-        <ul>
-          <li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
-              <em>Example:</em> <code>faith</code></li>
+    <!-- Help button stays inline -->
+    <button
+      class="btn btn-secondary help-toggle"
+      type="button"
+      data-target="#search-help-panel"
+    >
+      Help
+    </button>
+  </div>
 
-          <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
-              <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
-
-          <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
-              <em>Example:</em> <code>love OR kindness</code></li>
-
-          <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
-              <em>Example:</em> <code>hope -future</code></li>
-
-          <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
-              <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
-
-          <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
-              <em>Example:</em> <code>John 3:16</code></li>
-        </ul>
-        <p><strong>Tip:</strong> You can combine these for powerful searches.<br>
-           <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
-      </div>
-    </div>
+  <!-- Help panel lives OUTSIDE the row so it doesn't shrink the input -->
+  <div id="search-help-panel" class="help-panel">
+    <h3>How to Use Search Operators</h3>
+    <ul>
+      <li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
+          <em>Example:</em> <code>faith</code></li>
+      <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
+          <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
+      <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
+          <em>Example:</em> <code>love OR kindness</code></li>
+      <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
+          <em>Example:</em> <code>hope -future</code></li>
+      <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
+          <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
+      <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
+          <em>Example:</em> <code>John 3:16</code></li>
+    </ul>
+    <p><strong>Tip:</strong> Combine operators:<br>
+       <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
   </div>
 </form>