From 53ab2d115b360ab6d50ae4d2ba299cbeb5b99f23 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 15 Feb 2024 14:20:59 +0530
Subject: [PATCH] Improved: UI for the filter cards

---
 src/views/BrokeringQuery.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 8252f75..88ce3af 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -127,7 +127,7 @@
             </div>
           </ion-card>
           <section class="filters">
-            <ion-card>
+            <ion-card class="ion-padding-vertical">
               <ion-item>
                 <ion-icon slot="start" :icon="filterOutline"/>
                 <ion-label>{{ translate("Filters") }}</ion-label>
@@ -163,7 +163,7 @@
                 <ion-chip outline @click="selectValue('BRK_SAFETY_STOCK', 'Add safety stock')">{{ getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, "BRK_SAFETY_STOCK").fieldValue || getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, "BRK_SAFETY_STOCK").fieldValue == 0 ? getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, "BRK_SAFETY_STOCK").fieldValue : "-" }}</ion-chip>
               </ion-item>
             </ion-card>
-            <ion-card>
+            <ion-card class="ion-padding-vertical">
               <ion-item>
                 <ion-icon slot="start" :icon="swapVerticalOutline"/>
                 <ion-label>{{ translate("Sort") }}</ion-label>
@@ -1091,7 +1091,8 @@ async function save() {
 <style scoped>
 .filters {
   display: grid;
-  grid-template-columns: repeat(2, auto);
+  grid-template-columns: repeat(2, 1fr);
+  align-items: start;
 }
 
 .actions {
@@ -1100,8 +1101,9 @@ async function save() {
 
 .rule-info {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: 1fr 1fr;
   align-items: start;
+  gap: var(--spacer-xs)
 }
 
 ion-content > div {