Fixed event logs pagination on small screen
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ifb3963d416a7e2663af24c3c7b1d2c1876af6788
diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss
index 0c2ac85..d38ce5d 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 af57652..22a6283 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