UI Improvement

src/views/Staking.vue

@@ -3,6 +3,7 @@
     <b-card
       v-if="pingVals && pingVals.length > 0"
       title="❤️ Helping Ping.pub By Staking ❤️"
+      class="overflow-auto"
     >
       <b-table
         :items="pingVals"
@@ -91,6 +92,7 @@
     </b-card>
     <b-card
       no-body
+      class="overflow-auto"
     >
       <b-card-header class="d-flex justify-content-between">
         <b-form-group class="mb-0">
@@ -197,8 +199,8 @@
           </template>
         </b-table>
       </b-card-body>
-      <template #footer>
-        <small class="d-none d-md-block">
+      <b-card-footer class="d-none d-md-block">
+        <small>
           <b-badge variant="danger">
               &nbsp;
           </b-badge>
@@ -208,7 +210,7 @@
           </b-badge>
           Top 67% of Voting Power
         </small>
-      </template>
+      </b-card-footer>
     </b-card>
     <operation-modal
       type="Delegate"
@@ -221,6 +223,7 @@
 <script>
 import {
   BTable, BMedia, BAvatar, BBadge, BCard, BCardHeader, BCardTitle, VBTooltip, BCardBody, BButton, BFormRadioGroup, BFormGroup,
+  BCardFooter,
 } from 'bootstrap-vue'
 import {
   percent, StakingParameters, formatToken,
@@ -243,6 +246,7 @@ export default {
     BButton,
     BFormRadioGroup,
     BFormGroup,
+    BCardFooter,
     OperationModal,
   },
   directives: {