Fix a bug related to overlay of the suggestions

The suggestions div has a certain amount of padding that create a div
kind of object when the entered content doesn't match anything, however
this was creating an issue for the settings page.

Fixed that bug by hiding that div when the settings page is opened

css/main.css

@@ -71,7 +71,8 @@ body {
         padding: 7px 14px;
         font-size: 18px;
         color: #fff;
-        box-sizing: border-box; }
+        box-sizing: border-box;
+        z-index: -1; }
         .main #search-bar .autocomplete-items-container .autocomplete-item:hover {
           background: #3b3b3b; }
       .main #search-bar .autocomplete-items-container .autocomplete-active {
@@ -131,7 +132,7 @@ body {
 .settings-modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 3;
   width: 80vw;
   height: 80vh;
   overflow: auto;

js/autocomplete.js

@@ -15,7 +15,7 @@ function autocomplete(inp, passedValues) {
         currentFocus = -1;
 
         // Update some values of the parent container
-        parentContainer.setAttribute("id", this.id + "autocomplete-list");
+        parentContainer.setAttribute("id", this.id + "-autocomplete-list");
         parentContainer.style.paddingBottom = "1rem";
 
 

js/main.js

@@ -3,7 +3,7 @@ window.onload = function() {
 }
 
 
-debug = true; // Enable while testing on local
+debug = false; // Enable while testing on local
 searchBarDivId = "search-bar"
 searchBarId = "search-bar-input"
 messageDivId = "message"
@@ -81,6 +81,8 @@ function initSearchBar(jsonData) {
         if (query == "--setting") {
             showSettings()
             document.getElementById(searchBarId).value = ""
+            // Remove the autocomplete boxes
+            document.getElementById("search-bar-input-autocomplete-list").style.display = "none";
             return
         }
 

scss/main.scss

@@ -107,6 +107,7 @@ body {
                 font-size: 18px;
                 color: $foreground;
                 box-sizing: border-box;
+                z-index: -1;
 
                 &:hover {
                     background: lighten($background, 10);
@@ -224,7 +225,7 @@ body {
 .settings-modal {
     display: none;
     position: fixed;
-    z-index: 1;
+    z-index: 3;
     width: 80vw;
     height: 80vh;
     overflow: auto;