From f6ced1280ac3b07348078460a21d110057cba65f Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Mon, 23 Aug 2021 15:11:34 +0200
Subject: [PATCH] fix search at mobile

---
 src/components/custom/FilterDropdown.vue | 2 +-
 src/components/custom/SearchBox.vue      | 2 +-
 src/pages/Blog.vue                       | 4 ++--
 src/pages/News.vue                       | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/custom/FilterDropdown.vue b/src/components/custom/FilterDropdown.vue
index 4ac8206e5..8a7be9a6a 100644
--- a/src/components/custom/FilterDropdown.vue
+++ b/src/components/custom/FilterDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex ml-auto">
+  <div class="inline-flex md:ml-auto">
     <header
       class="
         inline-flex
diff --git a/src/components/custom/SearchBox.vue b/src/components/custom/SearchBox.vue
index 72f563450..086d5c80a 100644
--- a/src/components/custom/SearchBox.vue
+++ b/src/components/custom/SearchBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex rounded-full border-grey-light test">
+  <div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0">
     <button>
       <span class="w-auto inline-flex justify-end items-center text-grey p-2">
         <font-awesome :icon="['fas', 'search']" />
diff --git a/src/pages/Blog.vue b/src/pages/Blog.vue
index 320d42833..e64b0b539 100644
--- a/src/pages/Blog.vue
+++ b/src/pages/Blog.vue
@@ -10,10 +10,10 @@
       :months="months"
     /> -->
     <div
-      class="container sm:pxi-0 mx-auto mt-8"
+      class="container sm:pxi-0 mx-auto overflow-hidden"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="flex">
+      <div class="flex flex-wrap my-5">
         <FilterDropdown
           class="xs:w-1/2"
           @selectedTopic="setTopic"
diff --git a/src/pages/News.vue b/src/pages/News.vue
index fc8cea506..26e6a19b1 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -14,7 +14,7 @@
       class="container sm:pxi-0 mx-auto overflow-hidden"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="flex ml-auto my-5">
+      <div class="flex flex-wrap my-5">
         <FilterDropdown @selectedTopic="setTopic" :topics="topics" />
         <SearchBox v-model="search" />
       </div>