bug: Fixes irregular padding on agent selector in report page (#3593)

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

* code climate fixes

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);

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;
 }

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="