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

@@ -35,6 +35,10 @@
               size="sm"
               text="Pairs"
               :variant="color"
+            >
+              <vue-perfect-scrollbar
+                :settings="settings"
+                class="pair-scroll-area"
               >
                 <b-dropdown-item
                   v-for="(pair, i) in tickers"
@@ -42,7 +46,10 @@
                   @click="selectPair(pair)"
                 >
                   <b-row style="width:400px;">
-                  <b-col cols="4">
+                    <b-col
+                      cols="4"
+                      class="text-truncate"
+                    >
                       {{ pair.market.name }}
                     </b-col>
                     <b-col
@@ -60,6 +67,7 @@
                     </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>