Streamline autocompletion

Author: josevalim

assets/css/autocomplete.css

@@ -73,6 +73,9 @@
   transition: var(--transition-colors);
   border-top: 1px solid var(--suggestionBorder);
   font-size: 0.9rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .autocomplete-suggestion.selected {
@@ -90,9 +93,13 @@
   font-weight: bold;
 }
 
+.autocomplete-suggestion .separator {
+  opacity: 0.4;
+  margin: 0 2px;
+}
+
 .autocomplete-suggestion .description {
   opacity: 0.6;
-  padding-top: 3px;
 }
 
 .autocomplete-suggestion .label {
@@ -107,17 +114,6 @@
   font-size: 0.7rem;
 }
 
-.autocomplete-suggestion .header {
-  margin-right: 5px;
-}
-
-.autocomplete-suggestion .title,
-.autocomplete-suggestion .description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-}
 
 @media screen and (hover: none) {
   .autocomplete-results .press-return {

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

@@ -12,23 +12,17 @@
     <div>
       {{#each suggestions}}
       <a href="{{link}}" class="autocomplete-suggestion" data-index="{{@index}}" tabindex="-1">
-        <div class="title">
-          {{# if deprecated }}
-          <s><span class="header" translate="no">{{{title}}}</span></s>
-          {{ else }}
-          <span class="header" translate="no">{{{title}}}</span>
-          {{/if}}
-
-          {{#each labels}}
-          <span class="label">{{this}}</span>
-          {{/each}}
-        </div>
-
+        <span class="header" translate="no">{{{title}}}</span>
         {{#if description}}
-        <div class="description" translate="no">
-          {{{description}}}
-        </div>
+        <span class="separator" aria-hidden="true"> · </span>
+        <span class="description" translate="no">{{{description}}}</span>
         {{/if}}
+        {{# if deprecated }}
+        <span class="label deprecated">deprecated</span>
+        {{/if}}
+        {{#each labels}}
+        <span class="label">{{this}}</span>
+        {{/each}}
       </a>
       {{/each}}
     </div>