From b0529355f15c9348e8a81cf849051e9b019d5206 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 17 May 2024 17:23:32 +0530
Subject: [PATCH] fix: allow multiple filters

---
 frontend/src/components/ViewControls.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 9b2c78dd..72d899f7 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -22,8 +22,24 @@
         </template>
       </Dropdown>
     </div>
-    <div class="flex items-center flex-1 gap-2 border-l pl-2">
-      <div v-for="filter in quickFilters.data" :key="filter.name">
+    <div class="-mr-2 h-[70%] border-l" />
+    <div
+      class="flex flex-1 items-center overflow-x-auto px-1"
+      style="
+        mask-image: linear-gradient(
+          to right,
+          black calc(100% - 20px),
+          transparent 100%
+        );
+      "
+    >
+      <div
+        v-for="filter in quickFilters.data || [
+          { name: 'name', label: __('ID') },
+        ]"
+        :key="filter.name"
+        class="min-w-36 m-1"
+      >
         <FormControl
           v-if="filter.type == 'Check'"
           :label="filter.label"
@@ -50,6 +66,7 @@
         />
       </div>
     </div>
+    <div class="-ml-2 h-[70%] border-l" />
     <div class="flex items-center gap-2">
       <div
         v-if="viewUpdated && route.query.view && (!view.public || isManager())"