restyle invoice filters on medium size screens

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'])

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"