Use smaller font size.

src/views/components/dashboard/DashboardCardHorizontal.vue

@@ -2,9 +2,9 @@
   <b-card no-body>
     <b-card-body class="d-flex justify-content-between align-items-center">
       <div class="truncate">
-        <h2 class="mb-25 font-weight-bolder">
+        <h4 class="mb-25 font-weight-bolder">
           {{ statistic }}
-        </h2>
+        </h4>
         <span>{{ statisticTitle }}</span>
       </div>
       <b-avatar

src/views/components/dashboard/DashboardCardVertical.vue

@@ -11,9 +11,9 @@
       />
     </b-avatar>
     <div class="truncate">
-      <h2 class="mb-25 font-weight-bolder">
+      <h4 class="mb-25 font-weight-bolder">
         {{ statistic }}
-      </h2>
+      </h4>
       <span>{{ statisticTitle }}</span>
     </div>
   </b-card>

src/views/components/dashboard/DashboardPriceChart2.vue

@@ -36,30 +36,38 @@
               text="Pairs"
               :variant="color"
             >
-              <b-dropdown-item
+              <vue-perfect-scrollbar
-                v-for="(pair, i) in tickers"
+                :settings="settings"
-                :key="i"
+                class="pair-scroll-area"
-                @click="selectPair(pair)"
               >
-                <b-row style="width:400px;">
+                <b-dropdown-item
-                  <b-col cols="4">
+                  v-for="(pair, i) in tickers"
-                    {{ pair.market.name }}
+                  :key="i"
-                  </b-col>
+                  @click="selectPair(pair)"
-                  <b-col
+                >
-                    cols="4"
+                  <b-row style="width:400px;">
-                    class="text-uppercase text-truncate"
+                    <b-col
-                  >
+                      cols="4"
-                    {{ coinInfo.symbol }}/{{ pair.target }}
+                      class="text-truncate"
-                  </b-col>
+                    >
-                  <b-col
+                      {{ pair.market.name }}
-                    cols="4"
+                    </b-col>
-                    class="font-weight-bold"
+                    <b-col
-                    :class="`text-${colorMap(pair.trust_score)}`"
+                      cols="4"
-                  >
+                      class="text-uppercase text-truncate"
-                    ${{ pair.converted_last.usd }}
+                    >
-                  </b-col>
+                      {{ coinInfo.symbol }}/{{ pair.target }}
-                </b-row>
+                    </b-col>
-              </b-dropdown-item>
+                    <b-col
+                      cols="4"
+                      class="font-weight-bold"
+                      :class="`text-${colorMap(pair.trust_score)}`"
+                    >
+                      ${{ pair.converted_last.usd }}
+                    </b-col>
+                  </b-row>
+                </b-dropdown-item>
+              </vue-perfect-scrollbar>
             </b-dropdown>
             <div class="text-truncate ml-1">
               <sup class="text-body">
@@ -199,6 +207,7 @@ import {
 } from 'bootstrap-vue'
 import VueApexCharts from 'vue-apexcharts'
 import { $themeColors } from '@themeConfig'
+import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 import FeatherIcon from '../../../@core/components/feather-icon/FeatherIcon.vue'
 
 export default {
@@ -219,12 +228,16 @@ export default {
     BDropdown,
     BDropdownItem,
     FeatherIcon,
+    VuePerfectScrollbar,
   },
   directives: {
     'b-tooltip': VBTooltip,
   },
   data() {
     return {
+      settings: {
+        maxScrollbarLength: 60,
+      },
       colors: {
         green: 'success',
         yellow: 'warning',
@@ -390,3 +403,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.pair-scroll-area {
+  position: relative;
+  margin: auto;
+  /* width: 400px; //*/
+  max-height: 300px;
+}
+</style>