disable default mobile select styles, adjust hover state padding (#2601)

website/assets/styles/pages/query-library.less

@@ -89,6 +89,7 @@
     width: 180px;
     border-radius: 8px;
     cursor: pointer;
+
   }
   .dropdown-item {
     padding: 12px;
@@ -128,6 +129,9 @@
       margin-left: 0;
       border-radius: 8px;
       padding: 12px;
+      background: url('/images/chevron-down-9x6@2x.png') no-repeat 95% 50%;
+      background-size: 9px 6px;
+      -webkit-appearance: none;
     }
   }
 
@@ -146,13 +150,12 @@
   }
 
   .select-mobile-border {
-    height: 54px;
+    height: 52px;
     width: 100%;
     margin-right: 0;
     margin-left: 0;
     border: 1px solid #c5c7d1;
     border-radius: 8px;
-    padding-right: 15px;
   }
 
   .select-mobile {
@@ -192,15 +195,22 @@
     border-bottom: 1px solid;
     border-color: #e2e4ea;
   }
-
+  .query-card {
+    padding-top: 24px;
+    padding-bottom: 24px;
+  }
   .card.results {
     box-shadow: none;
     border: none;
     border-radius: 8px;
-
     &:hover {
-      background-color: #f1f0ff;
-      cursor: pointer;
+      .query-card {
+        background-color: #f1f0ff;
+        box-shadow: none;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+      }
     }
   }
 
@@ -215,8 +225,8 @@
 
   .card-body {
     padding: 30px;
-    padding-top: 24px;
-    padding-bottom: 24px;
+    padding-top: 0px;
+    padding-bottom: 0px;
   }
 
   .avatar-frame {

website/views/pages/query-library.ejs

@@ -95,8 +95,8 @@
         <div class="category__informational">
           <div v-for="query of queriesList">
             <div class="card results" @click="clickCard(query.slug)">
-              <div class="card-body query-card">
-                <div class="row justify-content-between align-items-center">
+              <div class="card-body">
+                <div class="row justify-content-between align-items-center query-card">
                   <div class="col-sm-9 col-md-9">
                     <h5 class="card-title m-0">{{query.name}}</h5>
                     <p class="font-italic mb-1 p-0 description">{{query.description}}</p>