Fix table row alignment and table head border

- Aligns content in table rows with expand and action buttons
- Adds border to table head

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I403575bedc78d71ad05edcae2f59f7df994d3630

10 files changed, 30 insertions, 13 deletions

diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index a712d631..349bfad4 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -11,6 +11,7 @@
     &:last-of-type {
       border-right: 1px solid gray("300");
     }
+    vertical-align: middle;
 
     // Table action buttons
     .btn-link {
@@ -23,9 +24,17 @@
     }
   }
 
-  // thead-light added for specificiy
+  // thead-light added for specificity
   .thead-light th {
-    border: none;
+    vertical-align: middle;
+    border-top: 1px solid gray("300");
+    border-bottom: 1px solid gray("300");
+    &:first-of-type {
+      border-left: 1px solid gray("300");
+    }
+    &:last-of-type {
+      border-right: 1px solid gray("300");
+    }
     color: theme-color("dark");
     &:focus {
       outline: none;
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index 22a62837..c345d8fb 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -206,7 +206,8 @@ export default {
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
-          sortable: true
+          sortable: true,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'type',
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 1c8bb974..e7ddf537 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -163,7 +163,8 @@ export default {
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'partNumber',
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index 961396a2..0b56a9fe 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -92,7 +92,8 @@ export default {
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'partNumber',
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 76ef2b63..babb8d07 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -105,7 +105,8 @@ export default {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'partNumber',
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index e955eda3..9ee9291c 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -104,7 +104,8 @@ export default {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'partNumber',
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 4d57feca..bd5cedb5 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -127,7 +127,8 @@ export default {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'partNumber',
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 0b2ee60e..de77243a 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -134,7 +134,8 @@ export default {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'partNumber',
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index 89ae5118..da4d5467 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -104,7 +104,8 @@ export default {
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
+          tdClass: 'text-nowrap'
         },
         {
           key: 'partNumber',
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 66bb7d50..acd2d18b 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -71,8 +71,7 @@
           </template>
 
           <template v-slot:cell(status)="{ value }">
-            <status-icon :status="statusIcon(value)" />
-            {{ value }}
+            <status-icon :status="statusIcon(value)" /> {{ value }}
           </template>
           <template v-slot:cell(currentValue)="data">
             {{ data.value }} {{ data.item.units }}
@@ -146,7 +145,8 @@ export default {
         {
           key: 'status',
           sortable: true,
-          label: this.$t('pageSensors.table.status')
+          label: this.$t('pageSensors.table.status'),
+          tdClass: 'text-nowrap'
         },
         {
           key: 'lowerCritical',