From a35b5a15ab7df82cde190698e18dbb3a0e5da075 Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Tue, 13 Oct 2020 17:08:20 +0530
Subject: Fixed event logs pagination on small screen

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ifb3963d416a7e2663af24c3c7b1d2c1876af6788
---
 src/assets/styles/bmc/custom/_pagination.scss | 6 +++++-
 src/views/Health/EventLogs/EventLogs.vue      | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss
index 0c2ac85c..d38ce5d2 100644
--- a/src/assets/styles/bmc/custom/_pagination.scss
+++ b/src/assets/styles/bmc/custom/_pagination.scss
@@ -1,6 +1,7 @@
 .table-pagination-select {
   display: flex;
   flex-direction: row-reverse;
+  justify-content: flex-end;
   select {
     width: fit-content;
   }
@@ -11,9 +12,12 @@
 }
 
 .b-pagination {
+  @include media-breakpoint-up(sm) {
+    justify-content: flex-end;
+  }
   .page-item.active button {
     color: theme-color("dark");
-    background-color: $white;
+    background-color: color("white");
     border-color: $border-color;
     box-shadow: inset 0px -3px theme-color("primary");
   }
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index af576521..22a62837 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -116,7 +116,7 @@
 
     <!-- Table pagination -->
     <b-row>
-      <b-col class="d-md-flex justify-content-between">
+      <b-col sm="6">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
@@ -128,6 +128,8 @@
             :options="itemsPerPageOptions"
           />
         </b-form-group>
+      </b-col>
+      <b-col sm="6">
         <b-pagination
           v-model="currentPage"
           first-number
-- 
cgit v1.2.3