From 02d35d67c0c46520959c34e6a349679533629b3a Mon Sep 17 00:00:00 2001
From: Kostiantyn Stoliarskyi <saintkos117@gmail.com>
Date: Tue, 20 Jun 2023 14:34:21 +0300
Subject: [PATCH] search and quicksearch

---
 app/templates/header.html                     |  3 +-
 app/templates/search/quick_search_window.html | 28 +++++++++----------
 .../search/search_results_books.html          | 12 ++++----
 .../search_results_interpretations.html       | 12 ++++----
 app/templates/search/search_results_tags.html | 12 ++++----
 .../search/search_results_users.html          | 12 ++++----
 app/templates/searchbar.html                  |  4 +--
 app/templates/sidebar.html                    |  6 ++++
 src/styles.css                                |  3 --
 9 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/app/templates/header.html b/app/templates/header.html
index 77aa9f8..9033906 100644
--- a/app/templates/header.html
+++ b/app/templates/header.html
@@ -66,8 +66,7 @@
           </div>
           {% endif %}
           {% include 'sidebar.html' %}
-
-        {% include 'searchbar.html' %}
+          {% include 'searchbar.html' %}
         <!-- prettier-ignore -->
         <button id="theme-toggle" type="button" class="md:block hidden md:ml-auto text-gray-500 dark:text-gray-400 hover:bg-gray-100 md:mr-2 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
           <!-- prettier-ignore -->
diff --git a/app/templates/search/quick_search_window.html b/app/templates/search/quick_search_window.html
index e65715b..0c0628a 100644
--- a/app/templates/search/quick_search_window.html
+++ b/app/templates/search/quick_search_window.html
@@ -1,5 +1,5 @@
 <!-- prettier-ignore -->
-<div id="quickSearchModal" tabindex="-1" aria-hidden="true" class="absolute w-96 top-14 left-[250px] z-50 hidden h-[calc(100%-1rem)] max-h-full">
+<div id="quickSearchModal" tabindex="-1" aria-hidden="true" class="absolute w-80 md:w-96 top-28 md:top-14 md:left-[250px] z-50 hidden h-[calc(100%-1rem)] max-h-full" >
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
@@ -29,14 +29,14 @@
               </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody class=" text-left">
             <tr class="interpretationsText-0">
-              <th scope="row"  class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row"  class="flex items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
                 <a href="" id="interpretationsText-0"></a></th>
             </tr>
              <tr class="interpretationsText-1">
-              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
                 <a href="" id="interpretationsText-1"></a></th>
             </tr>
@@ -44,7 +44,7 @@
           </table>
           </div>
           <div id="quickSearchBlock-books">
-            <table>
+          <table>
           <thead class="text-xs text-gray-900 uppercase dark:text-gray-400">
             <tr><th scope="col" class="flex items-center justify-start px-1 py-1">
                 <!-- prettier-ignore -->
@@ -52,14 +52,14 @@
               </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody class=" text-left">
             <tr class="booksText-0">
-              <th scope="row"  class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row"  class="flex items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
                 <a href="" id="booksText-0"></a></th>
             </tr>
              <tr class="booksText-1">
-              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
                 <a href="" id="booksText-1"></a></th>
             </tr>
@@ -75,14 +75,14 @@
               </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody class=" text-left">
             <tr class="usersText-0">
-              <th scope="row"  class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row"  class="flex w-80 items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg aria-hidden="true"  class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
                 <a href="" id="usersText-0"></a></th>
             </tr>
              <tr class="usersText-1">
-              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg aria-hidden="true"  class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
                 <a href="" id="usersText-1"></a></th>
             </tr>
@@ -98,14 +98,14 @@
               </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody class=" text-left">
             <tr class="tagsText-0">
-              <th scope="row"  class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row"  class="flex items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg>
                 <a href="" id="tagsText-0"></a></th>
             </tr>
              <tr class="tagsText-1">
-              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row" class="flex items-center px-2 py-2 font-medium text-gray-900 dark:text-white">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg>
                 <a href="" id="tagsText-1"></a></th>
             </tr>
diff --git a/app/templates/search/search_results_books.html b/app/templates/search/search_results_books.html
index 5cd06c1..e69a91d 100644
--- a/app/templates/search/search_results_books.html
+++ b/app/templates/search/search_results_books.html
@@ -13,30 +13,30 @@
   <!-- prettier-ignore -->
   <p class="hidden md:block text-sm ml-4 w-1/2 text-gray-500 text-center md:text-left dark:text-gray-400"> Showing {{count}} results </p>
   <!-- prettier-ignore -->
-  <div class="border-b border-gray-200 dark:border-gray-700">
-    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+  <div class="pt-10 md:pt-0 border-b border-gray-200 dark:border-gray-700">
+    <ul class="flex flex-wrap justify-between md:justify-start -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
         <li class="mr-2">
             <a href="{{url_for('search.search_interpretations',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group" >
                 <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" > <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
-                Interpretations
+                <span class="hidden md:inline">Interpretations</span>
             </a>
         </li>
         <li class="mr-2">
             <a   class="inline-flex p-4 text-blue-600 rounded-t-lg active dark:text-blue-500 group" aria-current="page">
                 <svg aria-hidden="true"  class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
-                Books
+                <span class="hidden md:inline">Books</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_users', q=query) }}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
-                Users
+                <span class="hidden md:inline">Users</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_tags',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg>
-                Tags
+                <span class="hidden md:inline">Tags</span>
             </a>
         </li>
     </ul>
diff --git a/app/templates/search/search_results_interpretations.html b/app/templates/search/search_results_interpretations.html
index a42d5eb..43c07d7 100644
--- a/app/templates/search/search_results_interpretations.html
+++ b/app/templates/search/search_results_interpretations.html
@@ -13,30 +13,30 @@
   <!-- prettier-ignore -->
   <p class="hidden md:block text-sm ml-4 w-1/2 text-gray-500 text-center md:text-left dark:text-gray-400"> Showing {{count}} results </p>
   <!-- prettier-ignore -->
-<div class="border-b border-gray-200 dark:border-gray-700">
-    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+<div class="pt-10 md:pt-0 border-b border-gray-200 dark:border-gray-700">
+    <ul class="flex flex-wrap justify-between md:justify-start -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
         <li class="mr-2">
             <a  class="inline-flex p-4 text-blue-600 rounded-t-lg active dark:text-blue-500  group" aria-current="page">
                 <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
-                Interpretations
+                <span class="hidden md:inline">Interpretations</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_books',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group" >
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
-                Books
+                <span class="hidden md:inline">Books</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_users', q=query) }}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
-                Users
+                <span class="hidden md:inline">Users</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_tags',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg>
-                Tags
+                <span class="hidden md:inline">Tags</span>
             </a>
         </li>
     </ul>
diff --git a/app/templates/search/search_results_tags.html b/app/templates/search/search_results_tags.html
index b2f2326..15c750d 100644
--- a/app/templates/search/search_results_tags.html
+++ b/app/templates/search/search_results_tags.html
@@ -5,7 +5,7 @@
 {% block right_sidebar %}
 {% endblock %}
 {% block content %}
-<div class="border-b border-gray-200 dark:border-gray-700">
+<div class="pt-10 md:pt-0 border-b border-gray-200 dark:border-gray-700">
   <!-- prettier-ignore -->
   <h1 class="hidden md:inline font-extrabold text-lg dark:text-white ml-4 mt-5">Search results</h1>
   <!-- prettier-ignore -->
@@ -14,29 +14,29 @@
   <p class="hidden md:block text-sm ml-4 w-1/2 text-gray-500 text-center md:text-left dark:text-gray-400"> Showing {{count}} results </p>
   <!-- prettier-ignore -->
   <div class="border-b border-gray-200 dark:border-gray-700">
-    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+    <ul class="flex flex-wrap justify-between md:justify-start -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
         <li class="mr-2">
             <a href="{{url_for('search.search_interpretations',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group" >
                 <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" > <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
-                Interpretations
+                <span class="hidden md:inline">Interpretations</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_books',q=query)}}"   class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
-                Books
+                 <span class="hidden md:inline">Books</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_users',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true"  class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
-                Users
+                <span class="hidden md:inline">Users</span>
             </a>
         </li>
         <li class="mr-2">
             <a  class="inline-flex p-4 text-blue-600 rounded-t-lg active dark:text-blue-500 group" aria-current="page">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg>
-                Tags
+                <span class="hidden md:inline">Tags</span>
             </a>
         </li>
     </ul>
diff --git a/app/templates/search/search_results_users.html b/app/templates/search/search_results_users.html
index 04d2bcc..91a268a 100644
--- a/app/templates/search/search_results_users.html
+++ b/app/templates/search/search_results_users.html
@@ -13,30 +13,30 @@
   <!-- prettier-ignore -->
   <p class="hidden md:block text-sm ml-4 w-1/2 text-gray-500 text-center md:text-left dark:text-gray-400"> Showing {{count}} results </p>
   <!-- prettier-ignore -->
-  <div class="border-b border-gray-200 dark:border-gray-700">
-    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+  <div class="pt-10 md:pt-0 border-b border-gray-200 dark:border-gray-700">
+    <ul class="flex flex-wrap justify-between md:justify-start -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
         <li class="mr-2">
             <a href="{{url_for('search.search_interpretations',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group" >
                 <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" > <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
-                Interpretations
+                <span class="hidden md:inline">Interpretations</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_books',q=query)}}"   class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
-                Books
+                <span class="hidden md:inline">Books</span>
             </a>
         </li>
         <li class="mr-2">
             <a class="inline-flex p-4 text-blue-600  rounded-t-lg active dark:text-blue-500 group" aria-current="page" >
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-500"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
-                Users
+                <span class="hidden md:inline">Users</span>
             </a>
         </li>
         <li class="mr-2">
             <a href="{{url_for('search.search_tags',q=query)}}" class="inline-flex p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 group">
                 <svg aria-hidden="true" class="w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg>
-                Tags
+                <span class="hidden md:inline">Tags</span>
             </a>
         </li>
     </ul>
diff --git a/app/templates/searchbar.html b/app/templates/searchbar.html
index d7cfa70..24b1b6d 100644
--- a/app/templates/searchbar.html
+++ b/app/templates/searchbar.html
@@ -1,5 +1,5 @@
 <!-- prettier-ignore -->
-<div class="hidden items-center justify-center py-1 bg-white dark:bg-gray-800 md:flex">
+<div class="items-center justify-center py-1 bg-white dark:bg-gray-800 md:flex {% if request.blueprint=='search' %}flex absolute md:static top-16 left-7{% else %}hidden{% endif %}">
     <label for="table-search" class="sr-only" >Search</label>
     <div class="relative">
         <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -10,6 +10,6 @@
         <input required minlength="1" autocomplete="off" name="search_query" {% if search_query %}value={{ search_query }}{% endif %} type="text" id="mainSearchInput" class="block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
     </div>
     <!-- prettier-ignore -->
-    <button type="submit" id="global-search-button" class="md:flex p-3 text-xs text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 ml-2 font-medium rounded-lg text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
+    <button type="submit" id="global-search-button" class="md:flex p-3 text-xs text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 ml-2 font-medium rounded-lg text-center hidden items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
 </div>
 {% include 'search/quick_search_window.html' %}
diff --git a/app/templates/sidebar.html b/app/templates/sidebar.html
index 49de7cb..8ff063f 100644
--- a/app/templates/sidebar.html
+++ b/app/templates/sidebar.html
@@ -61,6 +61,12 @@
         </a>
       </li>
       {% endif %}
+       <li>
+        <a href="{{ url_for('search.search_interpretations',q='')}}" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+          <!-- prettier-ignore -->
+          <span>Search</span>
+        </a>
+      </li>
       <li class="md:hidden">
         <div id="theme-toggle" class="absolute bottom-14 left-3 cursor-pointer flex items-center mt-2  p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
           <button type="button" class=" text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm">
diff --git a/src/styles.css b/src/styles.css
index 637442e..97d772f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -34,9 +34,6 @@
 .w-box {
   width: calc(100vw - 255px);
 }
-.mt-135 {
-  margin-top: 135px;
-}
 .disabled {
   pointer-events: none;
   cursor: default;