From e0c9687f5ec1bb99100f899906a03c49d553e2f2 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 16 Dec 2021 13:20:35 +0530
Subject: [PATCH] bug: Fixes irregular padding on agent selector in report page
 (#3593)

* bug: Fixes irregular padding on agent selector in report page

* code climate fixes
---
 .../dashboard/assets/scss/plugins/_multiselect.scss       | 4 ++++
 .../dashboard/assets/scss/widgets/_reports.scss           | 3 ++-
 .../settings/reports/components/ReportFilters.vue         | 8 ++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index e97792b972db..deba11150772 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -51,6 +51,10 @@
         width: 100%;
       }
 
+      p {
+        margin-bottom: 0;
+      }
+
       &.multiselect__option--highlight {
         background: var(--white);
         color: var(--color-body);
diff --git a/app/javascript/dashboard/assets/scss/widgets/_reports.scss b/app/javascript/dashboard/assets/scss/widgets/_reports.scss
index eeb958ff3fc5..bbd03ce9ff46 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_reports.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_reports.scss
@@ -21,6 +21,7 @@
   border: 1px solid var(--color-border);
 }
 
-.display-flex {
+.reports-option__wrap {
+  align-items: center;
   display: flex;
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index a2f45973409d..46071f4503ea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -15,7 +15,7 @@
         @input="changeFilterSelection"
       >
         <template slot="singleLabel" slot-scope="props">
-          <div class="display-flex">
+          <div class="reports-option__wrap">
             <thumbnail
               src="props.option.thumbnail"
               :username="props.option.name"
@@ -28,7 +28,7 @@
           </div>
         </template>
         <template slot="option" slot-scope="props">
-          <div class="display-flex">
+          <div class="reports-option__wrap">
             <thumbnail
               src="props.option.thumbnail"
               :username="props.option.name"
@@ -55,7 +55,7 @@
         @input="changeFilterSelection"
       >
         <template slot="singleLabel" slot-scope="props">
-          <div class="display-flex">
+          <div class="reports-option__wrap">
             <div
               :style="{ backgroundColor: props.option.color }"
               class="reports-option__rounded--item margin-right-small"
@@ -68,7 +68,7 @@
           </div>
         </template>
         <template slot="option" slot-scope="props">
-          <div class="display-flex">
+          <div class="reports-option__wrap">
             <div
               :style="{ backgroundColor: props.option.color }"
               class="