Improvements to search bar

assets/css/autocomplete.css

@@ -1,7 +1,7 @@
 .autocomplete {
   display: none;
   position: absolute;
-  width: 84%;
+  width: calc(100% - 32px);
   top: 55px;
 }
 
@@ -12,8 +12,8 @@
   border-right: 12px solid transparent;
   border-bottom: 12px solid var(--autocompleBackground);
   position: absolute;
-  top: 9px;
-  left: 10%;
+  top: 8px;
+  left: 26px;
   transform: translateX(-50%);
   z-index: 100;
   background-color: transparent;
@@ -22,31 +22,20 @@
 .autocomplete-results {
   list-style: none;
   margin: 0;
-  padding: 15px;
+  padding: 15px 20px;
   display: flex;
   justify-content: space-between;
   color: var(--autocompleteResults);
   font-family: var(--sansFontFamily);
   font-weight: 300;
   font-size: 0.9rem;
-  gap: 3%;
-}
-
-.autocomplete-results .show {
-  white-space: normal;
-  overflow-x: hidden;
-  width: 84%;
 }
 
 .autocomplete-results .bold {
   color: var(--autocompleteResultsBold);
   font-weight: 400;
 }
 
-.autocomplete-results .mobile-hide {
-  width: 35%;
-}
-
 .autocomplete.shown {
   display: block;
 }
@@ -61,7 +50,6 @@
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
   max-height: 450px;
-  padding: 0 0 10px 0;
   white-space: normal;
   overflow-x: hidden;
 }
@@ -76,6 +64,14 @@
   font-size: 0.9rem;
 }
 
+.autocomplete-suggestion:first-child() {
+  border-top: 1px solid var(--suggestionBorder);
+}
+
+.autocomplete-suggestion:last-child() {
+  border-bottom: 0;
+}
+
 .autocomplete-suggestion:hover,
 .autocomplete-suggestion.selected {
   background-color: var(--autocompleteHover);
@@ -133,51 +129,8 @@
   background-color: var(--autocompleteSrollbarTrack);
 }
 
-@media (max-width: 480px) {
-
-  .autocomplete {
-    width: 90%;
-  }
-
-  .autocomplete .triangle {
-    left: 27%;
-  }
-}
-
-@media (min-width: 481px) and (max-width: 767px) {
-
-  .autocomplete {
-    width: 95%;
-  }
-
-  .autocomplete .triangle {
-    left: 17%;
-  }
-}
-
-@media (max-width: 767px) {
-  .autocomplete {
-    top: 50px;
-    left: 0;
-    right: 0;
-    z-index: 200;
-  }
-
-  .autocomplete .triangle {
-    left: 17%;
-  }
-}
-
-@media (max-width: 1023px) {
-  .autocomplete-results {
-    gap: 0;
-  }
-
-  .autocomplete-results .show {
-    width: 100%;
-  }
-
-  .autocomplete-results .mobile-hide {
+@media screen and (max-width: 1023px) {
+  .autocomplete-results .press-return {
     display: none;
   }
 }

assets/css/search-bar.css

@@ -8,6 +8,7 @@
   column-gap: 12px;
   align-items: center;
   width: 100%;
+  position: relative;
 }
 
 .search-bar {

assets/js/handlebars/templates/autocomplete-suggestions.handlebars

@@ -1,33 +1,34 @@
 <div class="triangle"></div>
 <div class="autocomplete-suggestions">
   <div class="autocomplete-results">
-    <span class="show">Autocompletion results for 
-      <span class="bold"> "{{term}}" </span>.
-    </span> 
-    <span class="mobile-hide">Press 
-      <span class="bold">RETURN</span> 
-      for full-text search.
+    <span>
+      Autocompletion results for <span class="bold">"{{term}}"</span>
+    </span>
+    <span class="press-return">
+      Press <span class="bold">RETURN</span> for full-text search
     </span>
   </div>
-  {{#each suggestions}}
-    <a href="{{link}}" class="autocomplete-suggestion" data-index="{{@index}}" tabindex="-1">
-      <div class="title">
-        {{# if deprecated }}
-          <s><span translate="no">{{{title}}}</span></s>
-        {{ else }}
-          <span translate="no">{{{title}}}</span>
-        {{/if}}
-
-        {{#if label}}
-          <span class="label">{{label}}</span>
-        {{/if}}
-      </div>
+  <div>
+    {{#each suggestions}}
+      <a href="{{link}}" class="autocomplete-suggestion" data-index="{{@index}}" tabindex="-1">
+        <div class="title">
+          {{# if deprecated }}
+            <s><span translate="no">{{{title}}}</span></s>
+          {{ else }}
+            <span translate="no">{{{title}}}</span>
+          {{/if}}
 
-      {{#if description}}
-        <div class="description" translate="no">
-          {{{description}}}
+          {{#if label}}
+            <span class="label">{{label}}</span>
+          {{/if}}
         </div>
-      {{/if}}
-    </a>
-  {{/each}}
+
+        {{#if description}}
+          <div class="description" translate="no">
+            {{{description}}}
+          </div>
+        {{/if}}
+      </a>
+    {{/each}}
+  </div>
 </div>