Align autocompletion with results

Author: josevalim

Diff for: assets/css/autocomplete.css

@@ -1,24 +1,23 @@
 .autocomplete {
   display: none;
   height: 0;
-  margin: 0 5px 0 0;
+  margin-right: 32px;
   overflow: visible;
   position: relative;
-  width: 95%;
 }
 
 .autocomplete .triangle {
   width: 0;
   height: 0;
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
-  border-bottom: 12px solid var(--autocompleBackground); 
+  border-bottom: 12px solid var(--autocompleBackground);
   position: absolute;
-  top: 9px; 
-  left: 10%; 
+  top: 9px;
+  left: 10%;
   transform: translateX(-50%);
-  z-index: 250; 
-  background-color: transparent; 
+  z-index: 250;
+  background-color: transparent;
 }
 
 .autocomplete-results {
@@ -61,20 +60,19 @@
   width: 100%;
   z-index: 200;
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
-  overflow-y: auto; 
-  max-height: 450px; 
+  overflow-y: auto;
+  max-height: 450px;
   padding: 0 0 10px 0;
-  margin-right: 10px;
   white-space: normal;
-  overflow-x: hidden; 
+  overflow-x: hidden;
 }
 
 .autocomplete-suggestion {
   color: inherit;
   display: block;
   padding: 12px 20px;
   text-decoration: none;
-  transition: background-color .3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
   border-bottom: 1px solid var(--suggestionBorder);
   font-size: 0.9rem;
 }
@@ -90,7 +88,7 @@
 }
 
 .autocomplete-suggestion .description {
-  opacity: .6;
+  opacity: 0.6;
   padding-top: 3px;
 }
 
@@ -128,7 +126,7 @@
 /* Style the scrollbar thumb (the draggable part) */
 .autocomplete-suggestions::-webkit-scrollbar-thumb {
   background-color: var(--autocompleteSrollbarThumb);
-  border-radius: 7px; 
+  border-radius: 7px;
 }
 
 /* Style the scrollbar track on hover */
@@ -138,26 +136,26 @@
 
 @media (max-width: 480px) {
   .autocomplete .triangle {
-    left: 27%; 
+    left: 27%;
   }
 }
 
 @media (max-width: 767px) {
   .autocomplete .triangle {
-    left: 17%; 
+    left: 17%;
   }
 }
 
 @media (max-width: 1024px) {
   .autocomplete-results {
     gap: 0;
   }
-  
+
   .autocomplete-results .show {
     width: 100%;
   }
- 
+
   .autocomplete-results .mobile-hide {
     display: none;
   }
-}
+}