Add table responsive layout and fix search icon visibility

-Add responsive layout for all the tables.
-Fix search icon visibility in search component.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ibb4f77cf322aeb3699b13ab6cbbdb6cc38efbdc4

15 files changed, 35 insertions, 25 deletions

diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 84cdd04d..bb18ceb5 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -75,6 +75,7 @@ $toolbar-height: 46px;
 .toolbar-container {
   width: 100%;
   position: relative;
+  z-index: 5;
 }
 
 .toolbar-content {
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index 63b73a2e..c09d1661 100644
--- a/src/views/AccessControl/Ldap/TableRoleGroups.vue
+++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue
@@ -30,6 +30,7 @@
         />
         <b-table
           ref="table"
+          responsive
           selectable
           no-select-on-click
           no-sort-reset
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 957ea137..7906072e 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -28,6 +28,7 @@
         />
         <b-table
           ref="table"
+          responsive="md"
           selectable
           no-select-on-click
           :fields="fields"
@@ -116,13 +117,13 @@ import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
 
 import ModalUser from './ModalUser';
 import ModalSettings from './ModalSettings';
-import PageTitle from '../../../components/Global/PageTitle';
+import PageTitle from '@/components/Global/PageTitle';
 import TableRoles from './TableRoles';
-import TableToolbar from '../../../components/Global/TableToolbar';
-import TableRowAction from '../../../components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableRowAction from '@/components/Global/TableRowAction';
 
-import BVTableSelectableMixin from '../../../components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '../../../components/Mixins/BVToastMixin';
+import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
@@ -163,7 +164,7 @@ export default {
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right'
+          tdClass: 'text-right text-nowrap'
         }
       ],
       tableToolbarActions: [
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index a951b4f5..24aeb30f 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-table small :items="items" :fields="fields">
+  <b-table stacked="sm" small :items="items" :fields="fields">
     <template v-slot:cell(administrator)="data">
       <template v-if="data.value">
         <checkmark20 />
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
index 7dcb4dd9..681ea4be 100644
--- a/src/views/AccessControl/SslCertificates/SslCertificates.vue
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -49,7 +49,7 @@
     </b-row>
     <b-row>
       <b-col xl="11">
-        <b-table :fields="fields" :items="tableItems">
+        <b-table responsive="md" :fields="fields" :items="tableItems">
           <template v-slot:cell(validFrom)="{ value }">
             {{ value | formatDate }}
           </template>
@@ -94,12 +94,12 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
 
 import ModalGenerateCsr from './ModalGenerateCsr';
 import ModalUploadCertificate from './ModalUploadCertificate';
-import PageTitle from '../../../components/Global/PageTitle';
-import TableRowAction from '../../../components/Global/TableRowAction';
-import StatusIcon from '../../../components/Global/StatusIcon';
-import Alert from '../../../components/Global/Alert';
+import PageTitle from '@/components/Global/PageTitle';
+import TableRowAction from '@/components/Global/TableRowAction';
+import StatusIcon from '@/components/Global/StatusIcon';
+import Alert from '@/components/Global/Alert';
 
-import BVToastMixin from '../../../components/Mixins/BVToastMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
@@ -143,7 +143,7 @@ export default {
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right'
+          tdClass: 'text-right text-nowrap'
         }
       ]
     };
diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
index 604949ca..fd245a31 100644
--- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue
+++ b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
@@ -101,6 +101,7 @@
         <b-row>
           <b-col lg="9" class="mb-3">
             <b-table
+              responsive="md"
               :fields="ipv4StaticTableFields"
               :items="form.ipv4StaticTableItems"
               class="mb-0"
@@ -210,6 +211,7 @@
         <b-row>
           <b-col lg="4" class="mb-3">
             <b-table
+              responsive
               :fields="dnsTableFields"
               :items="form.dnsStaticTableItems"
               class="mb-0"
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index bf340167..488efcab 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -41,6 +41,7 @@
         <b-table
           id="table-event-logs"
           ref="table"
+          responsive="md"
           selectable
           no-select-on-click
           sort-icon-left
@@ -213,7 +214,7 @@ export default {
           key: 'actions',
           sortable: false,
           label: '',
-          tdClass: 'text-right'
+          tdClass: 'text-right text-nowrap'
         }
       ],
       tableFilters: [
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 6a996524..ffbfc791 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -1,6 +1,6 @@
 <template>
   <page-section :section-title="$t('pageHardwareStatus.bmcManager')">
-    <b-table :items="items" :fields="fields">
+    <b-table responsive="md" :items="items" :fields="fields">
       <!-- Expand chevron icon -->
       <template v-slot:cell(expandRow)="row">
         <b-button
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index fdf58de4..5632e83f 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -1,6 +1,6 @@
 <template>
   <page-section :section-title="$t('pageHardwareStatus.chassis')">
-    <b-table :items="chassis" :fields="fields">
+    <b-table responsive="md" :items="chassis" :fields="fields">
       <!-- Expand chevron icon -->
       <template v-slot:cell(expandRow)="row">
         <b-button
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 6ae74433..79bbe96d 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -9,6 +9,7 @@
       sort-icon-left
       no-sort-reset
       sort-by="health"
+      responsive="md"
       :items="dimms"
       :fields="fields"
       :sort-desc="true"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 70d5d6d9..e9cbf049 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -8,6 +8,7 @@
     <b-table
       sort-icon-left
       no-sort-reset
+      responsive="md"
       sort-by="health"
       :items="fans"
       :fields="fields"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 98ec52d3..b6dd326e 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -8,6 +8,7 @@
     <b-table
       sort-icon-left
       no-sort-reset
+      responsive="md"
       sort-by="health"
       :items="powerSupplies"
       :fields="fields"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index 68f5de5a..bff91083 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -1,6 +1,6 @@
 <template>
   <page-section :section-title="$t('pageHardwareStatus.system')">
-    <b-table :items="systems" :fields="fields">
+    <b-table responsive="md" :items="systems" :fields="fields">
       <!-- Expand chevron icon -->
       <template v-slot:cell(expandRow)="row">
         <b-button
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index a73c4adb..f8564d86 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -28,6 +28,7 @@
         </table-toolbar>
         <b-table
           ref="table"
+          responsive="md"
           selectable
           no-select-on-click
           sort-icon-left
@@ -82,16 +83,16 @@
 </template>
 
 <script>
-import PageTitle from '../../../components/Global/PageTitle';
-import StatusIcon from '../../../components/Global/StatusIcon';
-import Search from '../../../components/Global/Search';
-import TableFilter from '../../../components/Global/TableFilter';
+import PageTitle from '@/components/Global/PageTitle';
+import Search from '@/components/Global/Search';
+import StatusIcon from '@/components/Global/StatusIcon';
+import TableFilter from '@/components/Global/TableFilter';
 import TableToolbar from '@/components/Global/TableToolbar';
 import TableToolbarExport from '@/components/Global/TableToolbarExport';
 
-import TableFilterMixin from '../../../components/Mixins/TableFilterMixin';
 import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 2c39cc36..5c862639 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -8,7 +8,7 @@
         variant="link"
         to="/health/event-logs"
         data-test-id="overviewEvents-button-eventLogs"
-        class="float-right"
+        class="float-md-right"
       >
         {{ $t('pageOverview.events.viewAllButton') }}
       </b-button>
@@ -16,7 +16,7 @@
         per-page="5"
         sort-by="date"
         sort-desc
-        stacked="sm"
+        responsive="md"
         :items="eventLogData"
         :fields="fields"
       >