From 13a1f352d892f7d2f56487a8db6e083be2d6d6bb Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 27 Dec 2021 15:36:18 +0000
Subject: [PATCH] Fix navbar and cleanup search suggestions.

---
 src/components/Navigation.vue        |  4 ++--
 src/components/SearchSuggestions.vue | 30 ++++++----------------------
 2 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 2d718d12..abc899d7 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,6 +1,6 @@
 <template>
-    <nav class="container flex flex-wrap items-center justify-between px-2 sm:px-4 py-2.5 w-full relative">
-        <div class="">
+    <nav class="flex flex-wrap items-center justify-between px-2 sm:px-4 py-2.5 w-full relative">
+        <div>
             <router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
                 ><img
                     alt="logo"
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 4abdbbe1..49e30871 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -1,14 +1,11 @@
 <template>
-    <div
-        class="absolute uk-panel uk-box-shadow-large suggestions-container"
-        :style="[{ background: secondaryBackgroundColor }]"
-    >
-        <ul class="uk-list uk-margin-remove uk-text-secondary">
+    <div class="absolute suggestions-container" :style="[{ background: secondaryBackgroundColor }]">
+        <ul>
             <li
                 v-for="(suggestion, i) in searchSuggestions"
                 :key="i"
                 :style="[selected === i ? { background: secondaryForegroundColor } : {}]"
-                class="uk-margin-remove suggestion"
+                class="suggestion"
                 @mouseover="onMouseOver(i)"
                 @mousedown.stop="onClick(i)"
             >
@@ -79,25 +76,10 @@ export default {
 
 <style>
 .suggestions-container {
-    left: 50%;
-    transform: translateX(-50%);
-    max-width: 640px;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 5px 0;
-    z-index: 10;
+    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)];
 }
+
 .suggestion {
-    padding: 4px 15px;
-}
-@media screen and (max-width: 959px) {
-    .suggestions-container {
-        max-width: calc(100% - 60px);
-    }
-}
-@media screen and (max-width: 639px) {
-    .suggestions-container {
-        max-width: calc(100% - 30px);
-    }
+    @apply p-y-1;
 }
 </style>