prevent map/player search dropdowns from appearing underneath other page elements

Author: why-Mia

src/components/SearchBoxMap.vue

@@ -42,7 +42,7 @@
     @click="showAutoCompleteDropdown = true"
     :placeholder = "props.placeholder"
     class="rounded-lg bg-main-800 text-left border border-transparent focus-within:border-main-50 py-2 px-3 text-sm leading-5 text-gray-200 placeholder:text-gray-500 outline-none">
-    <div class="absolute top-full w-full rounded-lg bg-main-900 border border-main-100 text-sm text-gray-300 mt-1 py-2 px-2 shadow-xl/20 hidden group-focus-within:block" v-if="showAutoCompleteDropdown && currentInput">
+    <div class="absolute top-full w-full rounded-lg bg-main-900 border border-main-100 text-sm text-gray-300 mt-1 py-2 px-2 shadow-xl/20 hidden group-focus-within:block z-[999]" v-if="showAutoCompleteDropdown && currentInput">
       <loadWheel v-if="isLoading" class="text-gray-300 flex mx-auto w-6 h-6"></loadWheel>
       <router-link v-else v-for="(result, index) in autoCompleteResults.slice(0, 6)" :to="{path:`/maps/${result}/?${params}`, query:urlParams.getAsObject()}" :key="index"
         @click="$emit('updateMap', result); showAutoCompleteDropdown = false"

src/components/SearchBoxPlayer.vue

@@ -42,7 +42,7 @@
     @click="showAutoCompleteDropdown = true"
     :placeholder = "props.placeholder"
     class="rounded-lg bg-main-800 text-left border border-transparent focus-within:border-main-50 py-2 px-3 text-sm leading-5 text-gray-200 placeholder:text-gray-500 outline-none">
-    <div class="absolute top-full w-full rounded-lg bg-main-900 border border-main-100 text-sm text-gray-300 mt-1 py-2 px-2 shadow-xl/20 hidden group-focus-within:block" v-if="showAutoCompleteDropdown && currentInput">
+    <div class="absolute top-full w-full rounded-lg bg-main-900 border border-main-100 text-sm text-gray-300 mt-1 py-2 px-2 shadow-xl/20 hidden group-focus-within:block z-[999]" v-if="showAutoCompleteDropdown && currentInput">
       <loadWheel v-if="isLoading" class="text-gray-300 flex mx-auto w-6 h-6"></loadWheel>
       <router-link v-else v-for="(result, index) in autoCompleteResults.slice(0, 6)" :to="{path:`/players/${result[1]}/?${params}`, query:urlParams.getAsObject()}" :key="index"
         @click="$emit('updatePlayer', result[1]); showAutoCompleteDropdown = false"