From f3120dfae5bdb7a8bbb4c955094bff4925116f23 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Fri, 9 Jan 2026 09:51:47 +0000
Subject: [PATCH] improve responsiveness of monitoring page

---
 .../server-health.component.html              | 21 ++++---
 .../server-health.component.scss              | 61 ++++++++++++++++++-
 2 files changed, 69 insertions(+), 13 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 4a222e632..7026ff848 100644
--- a/frontend/src/app/components/server-health/server-health.component.html
+++ b/frontend/src/app/components/server-health/server-health.component.html
@@ -15,31 +15,32 @@
             <th class="rank"></th>
             <th class="flag"></th>
             <th class="host">Host</th>
-            <th class="updated">Updated</th>
+            <th class="updated only-large">Updated</th>
             <th class="rtt only-small">RTT</th>
             <th class="rtt only-large">RTT</th>
             <th class="height">Height</th>
-            <th class="hybrid only-large">Hybrid</th>
-            <th class="frontend only-large">Front</th>
-            <th class="backend only-large">Back</th>
-            <th class="electrs only-large">Electrs</th>
-            <th class="ssr only-large">SSR</th>
-            <th class="core only-large">Core</th>
+            <th class="hybrid hash">Hybrid</th>
+            <th class="frontend hash">Front</th>
+            <th class="backend hash">Back</th>
+            <th class="electrs hash">Electrs</th>
+            <th class="ssr hash">SSR</th>
+            <th class="core">Core</th>
           </tr>
           <tr *ngFor="let host of hosts; let i = index; trackBy: trackByFn">
             <td class="rank">{{ i + 1 }}</td>
             <td class="flag">{{ host.active ? '⭐️' : host.flag }}</td>
             <td class="host">{{ host.link }}</td>
-            <td class="updated">{{ getLastUpdateSeconds(host) }}</td>
+            <td class="updated only-large">{{ getLastUpdateSeconds(host) }}</td>
             <td class="rtt only-small">{{ (host.rtt / 1000) | number : '1.1-1' }} {{ host.rtt == null ? '' : 's'}} {{ !host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅') }}</td>
             <td class="rtt only-large">{{ host.rtt | number : '1.0-0' }} {{ host.rtt == null ? '' : 'ms'}} {{ !host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅') }}</td>
             <td class="height">{{ host.latestHeight }} {{ !host.checked ? '⏳' : (host.outOfSync ? '🚫' : (host.latestHeight && host.latestHeight < maxHeight ? '🟧' : '✅')) }}</td>
             <ng-container *ngFor="let type of ['hybrid', 'frontend', 'backend', 'electrs', 'ssr', 'core']">
-              <td class="{{type}} only-large" [style.background-color]="type !== 'core' && host.hashes?.[type] ? '#' + host.hashes[type].slice(0, 6) : ''">
+              <td class="{{type}}" [class.hash]="type !== 'core'" [style.background-color]="type !== 'core' && host.hashes?.[type] ? '#' + host.hashes[type].slice(0, 6) : ''">
                 @if (type !== 'core' && host.hashes?.[type]) {
                   <a [style.color]="'white'" href="https://github.com/mempool/{{repoMap[type]}}/commit/{{ host.hashes[type] }}" target="_blank">{{ host.hashes[type].slice(0, 8) || '?' }}</a>
                 } @else if (host.hashes?.[type]) {
-                  <span [style.color]="'white'" style="font-size: 10px;">{{ host.hashes[type] || '?' }}</span>
+                  <span [style.color]="'white'" class="only-large" style="font-size: 10px;">{{ host.hashes[type] || '?' }}</span>
+                  <span [style.color]="'white'" class="only-small" style="font-size: 10px;">{{ host.hashes[type]?.slice(9) || '?' }}</span>
                 } @else {
                   <span>?</span>
                 }
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 4aa58732b..883ef22dc 100644
--- a/frontend/src/app/components/server-health/server-health.component.scss
+++ b/frontend/src/app/components/server-health/server-health.component.scss
@@ -50,10 +50,16 @@
         white-space: nowrap;
       }
 
-      @media (min-width: 576px) {
-        &.updated {
-          display: table-cell;
+      span {
+        &.only-small {
+          display: none;
         }
+        &.only-large {
+          display: inline;
+        }
+      }
+
+      @media (min-width: 576px) {
         &.only-small {
           display: none;
         }
@@ -62,5 +68,54 @@
         }
       }
     }
+
+    @media (max-width: 1080px) {
+      th {
+        font-size: 11px;
+      }
+
+      td, th {
+        &.updated {
+          display: none;
+        }
+
+        &.hash {
+          max-width: 50px;
+          overflow: hidden;
+        }
+        
+        span {
+          &.only-small {
+            display: inline;
+          }
+          &.only-large {
+            display: none;
+          }
+        }
+      }
+    }
+
+    @media (max-width: 800px) {
+      th {
+        font-size: 10px;
+      }
+      td, th {
+        &.hash {
+          max-width: 38px;
+          overflow: hidden;
+        }
+      }
+    }
+
+    @media (max-width: 670px) {
+      font-size: 11px;
+
+      td, th {
+        &.hash {
+          max-width: 30px;
+          overflow: hidden;
+        }
+      }
+    }
   }
 }
\ No newline at end of file