From aee64b25225e2b5e2b7e0abb190ec1fc4e075161 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Mon, 5 Feb 2018 20:53:04 -0500
Subject: [PATCH] fix visual glitch in search - showing search now doesn't move
 note content

---
 src/public/javascripts/note_tree.js |  2 +-
 src/public/stylesheets/style.css    |  8 +++++++-
 src/views/index.ejs                 | 14 +++++++-------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/public/javascripts/note_tree.js b/src/public/javascripts/note_tree.js
index 6c3ed1e61..5e4ab44b7 100644
--- a/src/public/javascripts/note_tree.js
+++ b/src/public/javascripts/note_tree.js
@@ -3,7 +3,7 @@
 const noteTree = (function() {
     const treeEl = $("#tree");
     const parentListEl = $("#parent-list");
-    const parentListListEl = $("#parent-list-list");
+    const parentListListEl = $("#parent-list-inner");
 
     let startNotePath = null;
     let notesTreeMap = {};
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 28639dabd..66be78699 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -5,13 +5,18 @@
     display: grid;
     grid-template-areas: "header header"
                          "tree-actions title"
+                         "search note-content"
                          "tree note-content"
                          "parent-list note-content"
                          "parent-list attribute-list";
     grid-template-columns: 2fr 5fr;
     grid-template-rows: auto
                         auto
-                        1fr;
+                        auto
+                        1fr
+                        auto
+                        auto;
+
     justify-content: center;
     grid-gap: 10px;
 }
@@ -135,6 +140,7 @@ div.ui-tooltip {
     margin-left: 20px;
     border-top: 2px solid #eee;
     padding-top: 10px;
+    grid-area: parent-list;
 }
 
 #parent-list ul {
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 863be4c39..fc04c89c7 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -56,13 +56,13 @@
             <img src="images/icons/search.png" alt="Search in notes"/>
           </a>
         </div>
+      </div>
 
-        <div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
-          <div style="display: flex; align-items: center;">
-            <label>Search:</label>
-            <input name="search-text" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
-            <button id="reset-search-button" class="btn btn-sm" title="Reset search">&times;</button>
-          </div>
+      <div id="search-box" class="hide-toggle" style="grid-area: search; display: none; padding: 10px; margin-top: 10px;">
+        <div style="display: flex; align-items: center;">
+          <label>Search:</label>
+          <input name="search-text" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
+          <button id="reset-search-button" class="btn btn-sm" title="Reset search">&times;</button>
         </div>
       </div>
 
@@ -72,7 +72,7 @@
       <div id="parent-list" class="hide-toggle">
         <p><strong>Note locations:</strong></p>
 
-        <ul id="parent-list-list"></ul>
+        <ul id="parent-list-inner"></ul>
       </div>
 
       <div class="hide-toggle" style="grid-area: title;">