From 04fbbe7b2adc2a166683ddbfc59a6e6ee6d67b74 Mon Sep 17 00:00:00 2001
From: Mohit Panjwani <mohit.panjvani@gmail.com>
Date: Thu, 2 Dec 2021 16:00:04 +0530
Subject: [PATCH] restyle invoice filters on medium size screens

---
 .../scripts/components/base/BaseFilterWrapper.vue   | 13 +++++++++----
 resources/scripts/views/invoices/Index.vue          |  6 +++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/resources/scripts/components/base/BaseFilterWrapper.vue b/resources/scripts/components/base/BaseFilterWrapper.vue
index ccc3c07b..938d052a 100644
--- a/resources/scripts/components/base/BaseFilterWrapper.vue
+++ b/resources/scripts/components/base/BaseFilterWrapper.vue
@@ -27,10 +27,11 @@
       </label>
 
       <div
-        class="
-          flex flex-col
-          space-y-3
-          lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-center
+        class="flex flex-col space-y-3"
+        :class="
+          rowOnXl
+            ? 'xl:flex-row xl:space-x-4 xl:space-y-0 xl:items-center'
+            : 'lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-center'
         "
       >
         <slot />
@@ -45,6 +46,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  rowOnXl: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 defineEmits(['clear'])
diff --git a/resources/scripts/views/invoices/Index.vue b/resources/scripts/views/invoices/Index.vue
index a500de5f..d3c7442b 100644
--- a/resources/scripts/views/invoices/Index.vue
+++ b/resources/scripts/views/invoices/Index.vue
@@ -38,7 +38,11 @@
       </template>
     </BasePageHeader>
 
-    <BaseFilterWrapper v-show="showFilters" @clear="clearFilter">
+    <BaseFilterWrapper
+      v-show="showFilters"
+      :row-on-xl="true"
+      @clear="clearFilter"
+    >
       <BaseInputGroup :label="$tc('customers.customer', 1)">
         <BaseCustomerSelectInput
           v-model="filters.customer_id"