Merge pull request #5176 from mempool/mononaut/fix-monitoring-layout

Fix monitoring table layout & text wrapping

frontend/src/app/components/server-health/server-health.component.html

@@ -9,13 +9,13 @@
 
   <ng-container *ngIf="(hosts$ | async) as hosts">
     <div class="status-panel">
-      <table class="status-table table table-fixed table-borderless table-striped" *ngIf="(tip$ | async) as tip">
+      <table class="status-table table table-borderless table-striped" *ngIf="(tip$ | async) as tip">
         <tbody>
           <tr>
             <th class="rank"></th>
             <th class="flag"></th>
             <th class="host">Host</th>
-            <th class="updated">Last checked</th>
+            <th class="updated">Updated</th>
             <th class="rtt only-small">RTT</th>
             <th class="rtt only-large">RTT</th>
             <th class="height">Height</th>

frontend/src/app/components/server-health/server-health.component.scss

@@ -20,26 +20,21 @@
 
     td, th {
       padding: 0.25em;
+      width: 0%;
 
       &.rank, &.flag {
-        width: 28px;
         text-align: right;
       }
       &.updated {
         display: none;
-        width: 130px;
         text-align: right;
-        white-space: pre-wrap;
+        white-space: nowrap;
       }
       &.rtt, &.height {
-        width: 92px;
         text-align: right;
       }
       &.only-small {
         display: table-cell;
-        &.rtt {
-          width: 60px;
-        }
       }
       &.only-large {
         display: none;
@@ -48,21 +43,17 @@
         padding-right: 0.5em;
       }
       &.host {
-        width: auto;
+        width: 100%;
+        max-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       @media (min-width: 576px) {
-        &.rank, &.flag {
-          width: 32px;
-        }
         &.updated {
           display: table-cell;
         }
-        &.rtt, &.height {
-          width: 96px;
-        }
         &.only-small {
           display: none;
         }

frontend/src/app/components/server-health/server-health.component.ts

@@ -62,7 +62,7 @@ export class ServerHealthComponent implements OnInit {
   getLastUpdateSeconds(host: HealthCheckHost): string {
     if (host.lastChecked) {
       const seconds = Math.ceil((this.now - host.lastChecked) / 1000);
-      return `${seconds} second${seconds > 1 ? 's' : '  '} ago`;
+      return `${seconds} s`;
     } else {
       return '~';
     }