Fix search box

src/components/custom/FilterDropdown.vue

@@ -11,10 +11,10 @@
         transition-all transition-500
       "
     >
-      <nav class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0">
       <ul
         class="
           list-none
+          m-0
           sm:flex
           justify-left
           capitalize
@@ -88,7 +88,6 @@
                 v-if="open"
                 class="
                   w-64
-                    max-h-10
                   px-2
                   py-2
                   bg-white
@@ -135,7 +134,6 @@
           </div>
         </li>
       </ul>
-      </nav>
     </header>
   </div>
 </template>

src/components/custom/SearchBox.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0">
+  <div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0 mr-5">
     <button>
       <span class="w-auto inline-flex justify-end items-center text-grey p-2">
         <font-awesome :icon="['fas', 'search']" />
       </span>
     </button>
     <input
-      class="rounded mr-4"
+      class="w-full rounded mr-4"
       type="text"
       placeholder="Search"
       :value="value"

src/pages/Blog.vue

@@ -9,17 +9,14 @@
       :years="years"
       :months="months"
     /> -->
-    <div
-      class="container sm:pxi-0 mx-auto overflow-hidden"
-      :style="{ 'min-height': contentHeight + 'px' }"
-    >
-      <div class="flex flex-wrap my-5">
+    <div class="container sm:pxi-0 mx-auto overflow-hidden">
+      <div class="flex my-5">
         <FilterDropdown
-          class="xs:w-1/2"
+          class="xs:w-2/3"
           @selectedTopic="setTopic"
           :topics="topics"
         />
-        <SearchBox class="xs:w-1/2" v-model="search" />
+        <SearchBox class="xs:w-1/3" v-model="search" />
       </div>
 
       <div v-if="search !== ''">

src/pages/News.vue

@@ -14,9 +14,13 @@
       class="container sm:pxi-0 mx-auto overflow-hidden"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="flex flex-wrap my-5">
-        <FilterDropdown @selectedTopic="setTopic" :topics="topics" />
-        <SearchBox v-model="search" />
+      <div class="flex my-5">
+        <FilterDropdown
+          class="xs:w-2/3"
+          @selectedTopic="setTopic"
+          :topics="topics"
+        />
+        <SearchBox class="xs:w-1/3" v-model="search" />
       </div>
 
       <div v-if="search !== ''">