Move search results inside the searchtext block, and wrap with a styl…

…ed div to prevent overlap with preceding text

docs/_static/custom.css

@@ -1,12 +1,12 @@
-html[data-theme=light], html[data-theme=dark] {
-  --sbt-color-announcement: #3f0000;
-}
-a:hover {
-  --pst-color-link-hover: var(--pst-color-link);
-}
-.bd-header-announcement__content > a {
-  color: #66e5ff;
-}
+/*html[data-theme=light], html[data-theme=dark] {*/
+/*  --sbt-color-announcement: #3f0000;*/
+/*}*/
+/*a:hover {*/
+/*  --pst-color-link-hover: var(--pst-color-link);*/
+/*}*/
+/*.bd-header-announcement__content > a {*/
+/*  color: #66e5ff;*/
+/*}*/
 /*:root {*/
 /*  --highlight-searchresult-color: #b9ee9e;*/
 /*  --codeblock-color: #aad993;*/
@@ -179,9 +179,9 @@ a:hover {
 /*  margin-bottom: 1em;*/
 /*}*/
 
-#search-results .breadcrumbs .pathseparator {
-  padding: 0 .5em;
-}
+/*#search-results .breadcrumbs .pathseparator {*/
+/*  padding: 0 .5em;*/
+/*}*/
 
 /*ul.search li span.highlighted {*/
 /*  background-color: var(--highlight-searchresult-color);*/
@@ -258,10 +258,10 @@ a:hover {
 /*}*/
 
 /* Fix title in sticky header on mobile */
-.header-article-item-chapter-title {
-  overflow-y: hidden;
-  max-height: 100%;
-}
+/*.header-article-item-chapter-title {*/
+/*  overflow-y: hidden;*/
+/*  max-height: 100%;*/
+/*}*/
 
 /*!* submenu *!*/
 /*.bd-toc {*/
@@ -379,3 +379,5 @@ a:hover {
 /*  font-style: italic;*/
 /*  white-space: nowrap;*/
 /*}*/
+/* Nuclia search styles */
+div.nuclia-search {margin-top: 1em;}

docs/_templates/search.html

@@ -14,8 +14,7 @@ <h1>{{ _("Search") }}</h1>
         {% trans %}Searching for multiple words only shows matches that contain
         all words.{% endtrans %}
       </div>
-    {% endblock %}
-</div>
+      <div class="nuclia-search">
 <script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>
 <script src="https://unpkg.com/@nuclia/core@latest/umd/index.js"></script>
 
@@ -37,7 +36,7 @@ <h1>{{ _("Search") }}</h1>
       const script2 = document.createElement("script"); // Call searchtester script after we get search results
       script2.src = "{{ pathto('_static/searchtester.js', 1) }}";
 
-      // On searchtester.js load call function to add breadcrumbs 
+      // On searchtester.js load call function to add breadcrumbs
       script2.onload = () => {
         addBreadcrumbsToResults();
       };
@@ -69,6 +68,9 @@ <h1>{{ _("Search") }}</h1>
     console.log("[PST]: Set focus on search field.");
   }
 </script>
+    {% endblock %}
+  </div>
+</div>
 {% endblock docs_body %}
 {# Below sections just re-create the behavior of Sphinx default search #}
 {# Page metadata #}