From 25b510359f1c370aa22f1e6401cba7bc63b03ea7 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 20 Jun 2024 03:09:54 +0000
Subject: [PATCH] Fix monitoring table layout & text wrapping

---
 .../server-health.component.html              |  4 ++--
 .../server-health.component.scss              | 19 +++++--------------
 .../server-health/server-health.component.ts  |  2 +-
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/components/server-health/server-health.component.html b/frontend/src/app/components/server-health/server-health.component.html
index 217e5c019..e2f76d786 100644
--- a/frontend/src/app/components/server-health/server-health.component.html
+++ b/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>
diff --git a/frontend/src/app/components/server-health/server-health.component.scss b/frontend/src/app/components/server-health/server-health.component.scss
index bbf94288f..ff4ec1384 100644
--- a/frontend/src/app/components/server-health/server-health.component.scss
+++ b/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;
         }
diff --git a/frontend/src/app/components/server-health/server-health.component.ts b/frontend/src/app/components/server-health/server-health.component.ts
index bb4d59959..37e23f12a 100644
--- a/frontend/src/app/components/server-health/server-health.component.ts
+++ b/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 '~';
     }