fix(ui): improve service dashboard readability

README.md

@@ -47,7 +47,9 @@ server.
 ### Features
 
 - Responsive service tabs with a compact status overview and one focused detail card; the entire card links to services with a web interface
-- Live dashboard showing every service's status and latency as measured by this browser
+- Readable dashboard tiles with separate name, status, and labeled latency rows; five columns on desktop, three on tablet, and one on mobile
+- Compact desktop dashboard spacing preserves the original page height while keeping larger text
+- Live browser measurements with tabular latency digits, reserved space for updates, and accessible status text contrast in Dark / Light / OLED
 - Collapsed browser-local history of the last 24 measurements with mini timelines and averages
 - Health checks for all configured services
 - Explicit `Checking`, `Online`, `Unreachable`, and `Unknown` service states
@@ -220,7 +222,9 @@ albo dowolnym serwerze statycznym.
 ### Funkcje
 
 - Responsywne zakładki usług z kompaktowym podsumowaniem i jednym aktywnym panelem szczegółów; cała karta prowadzi do usług z interfejsem WWW
-- Dashboard pokazujący status i opóźnienie każdej usługi, mierzone z tej przeglądarki
+- Czytelne kafelki dashboardu z osobnymi wierszami nazwy, statusu i opisanego opóźnienia; pięć kolumn na desktopie, trzy na tablecie i jedna na telefonie
+- Zwarte odstępy dashboardu na komputerze zachowują pierwotną wysokość strony przy większym tekście
+- Pomiary z przeglądarki z cyframi o stałej szerokości, miejscem zarezerwowanym na aktualizacje i czytelnym kontrastem tekstu statusów w motywach Dark / Light / OLED
 - Zwijana lokalna historia ostatnich 24 pomiarów z mini-timeline i średnim opóźnieniem
 - Health checki dla wszystkich skonfigurowanych usług
 - Jawne stany usług: `Checking`, `Online`, `Unreachable` i `Unknown`

css/styles.css

@@ -397,7 +397,7 @@ main {
 
 .dashboard-copy .tag {
     margin: 0;
-    font-size: .86rem;
+    font-size: .875rem;
 }
 
 .dashboard-grid {
@@ -422,13 +422,20 @@ main {
     font-weight: 700;
 }
 
-.dashboard-grid .pill {
-    color: var(--mut);
-    font-size: .78rem;
-}
-
 .dashboard-grid #dash-overall {
+    max-width: 100%;
     color: var(--fg);
+    font-size: 1rem;
+    line-height: 1.4;
+    font-weight: 800;
+    overflow-wrap: anywhere;
+}
+
+.dashboard-lastcheck {
+    color: var(--mut);
+    font-size: .875rem;
+    line-height: 1.4;
+    font-variant-numeric: tabular-nums;
 }
 
 .dashboard-grid #dash-overall.is-checking {
@@ -448,12 +455,9 @@ main {
 
 .dashboard-service {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-areas:
-        "dot name name"
-        "state state latency";
-    align-items: center;
-    gap: 8px 7px;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: 8px;
     min-width: 0;
     padding: 12px;
     border: 1px solid var(--line);
@@ -467,35 +471,40 @@ main {
     border-color: rgba(103, 189, 255, .26);
 }
 
-.dashboard-service > .dot {
-    grid-area: dot;
-}
-
 .dashboard-service-name {
-    grid-area: name;
     min-width: 0;
-    overflow: hidden;
-    font-size: .86rem;
+    min-height: 1.4em;
+    font-size: 1rem;
+    line-height: 1.4;
     font-weight: 800;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
 }
 
-.dashboard-service-state {
-    grid-area: state;
+.dashboard-service-status {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
 }
 
-.dashboard-service-latency {
-    grid-area: latency;
-    justify-self: end;
+.dashboard-service-status > .dot {
+    flex: 0 0 auto;
 }
 
 .dashboard-service-state,
 .dashboard-service-latency {
+    min-width: 0;
+    /* Reserve two lines so status and measurement updates do not move the tiles. */
+    min-height: 2.8em;
     color: var(--mut);
-    font-size: .72rem;
+    font-size: .875rem;
+    line-height: 1.4;
     font-weight: 750;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
+}
+
+.dashboard-service-latency {
+    font-variant-numeric: tabular-nums;
 }
 
 .dot {
@@ -1062,6 +1071,13 @@ footer {
         linear-gradient(145deg, #fff, var(--surface));
 }
 
+/* Keep dashboard status text readable on the light surfaces. */
+.theme-light .dashboard-card {
+    --good: #08783d;
+    --bad: #b42c3b;
+    --warn: #8a5700;
+}
+
 /* OLED theme */
 .theme-oled {
     --bg: #000;
@@ -1118,6 +1134,27 @@ footer {
     }
 }
 
+/* Keep the larger dashboard text within the original desktop footprint. */
+@media (min-width: 721px) {
+    .dashboard-services {
+        margin-top: 12px;
+    }
+
+    .dashboard-service {
+        gap: 2px;
+        padding: 8px 10px;
+    }
+
+    .dashboard-service-state,
+    .dashboard-service-latency {
+        min-height: 1.4em;
+    }
+
+    .status-history {
+        margin-top: 12px;
+    }
+}
+
 @media (max-width: 980px) {
     .dashboard-services {
         grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1218,7 +1255,7 @@ footer {
     }
 
     .dashboard-services {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-columns: minmax(0, 1fr);
     }
 
     .dashboard-service {
@@ -1309,6 +1346,14 @@ footer {
     }
 }
 
+/* Allow the dashboard to reflow at 200% zoom on narrow screens. */
+@media (max-width: 240px) {
+    .dashboard-service-state,
+    .dashboard-service-latency {
+        min-height: 4.2em;
+    }
+}
+
 @media (max-width: 390px) {
     .client-key {
         font-size: .54rem;

index.html

@@ -80,39 +80,49 @@ <h2 id="dash-title">Service status</h2>
                     </div>
                     <div class="dashboard-grid">
                         <span class="pill" id="dash-overall" aria-live="polite">0/5 online</span>
-                        <span class="pill" id="dash-lastcheck" aria-live="polite">Last update: --</span>
+                        <span class="dashboard-lastcheck" id="dash-lastcheck" aria-live="polite">Last update: --</span>
                     </div>
                 </div>
                 <div class="dashboard-services" id="dashboard-services" aria-label="Service details">
                     <div class="dashboard-service" id="dash-jf-status">
-                        <span class="dot" aria-hidden="true"></span>
                         <span class="dashboard-service-name" id="dash-jf-name">Jellyfin</span>
-                        <span class="dashboard-service-state" id="dash-jf-text">Checking…</span>
-                        <span class="dashboard-service-latency" id="dash-jf-latency">-- ms</span>
+                        <span class="dashboard-service-status">
+                            <span class="dot" aria-hidden="true"></span>
+                            <span class="dashboard-service-state" id="dash-jf-text">Checking…</span>
+                        </span>
+                        <span class="dashboard-service-latency" id="dash-jf-latency">Latency: -- ms</span>
                     </div>
                     <div class="dashboard-service" id="dash-fb-status">
-                        <span class="dot" aria-hidden="true"></span>
                         <span class="dashboard-service-name" id="dash-fb-name">FileBrowser</span>
-                        <span class="dashboard-service-state" id="dash-fb-text">Checking…</span>
-                        <span class="dashboard-service-latency" id="dash-fb-latency">-- ms</span>
+                        <span class="dashboard-service-status">
+                            <span class="dot" aria-hidden="true"></span>
+                            <span class="dashboard-service-state" id="dash-fb-text">Checking…</span>
+                        </span>
+                        <span class="dashboard-service-latency" id="dash-fb-latency">Latency: -- ms</span>
                     </div>
                     <div class="dashboard-service" id="dash-ab-status">
-                        <span class="dot" aria-hidden="true"></span>
                         <span class="dashboard-service-name" id="dash-ab-name">autobrr</span>
-                        <span class="dashboard-service-state" id="dash-ab-text">Checking…</span>
-                        <span class="dashboard-service-latency" id="dash-ab-latency">-- ms</span>
+                        <span class="dashboard-service-status">
+                            <span class="dot" aria-hidden="true"></span>
+                            <span class="dashboard-service-state" id="dash-ab-text">Checking…</span>
+                        </span>
+                        <span class="dashboard-service-latency" id="dash-ab-latency">Latency: -- ms</span>
                     </div>
                     <div class="dashboard-service" id="dash-st-status">
-                        <span class="dot" aria-hidden="true"></span>
                         <span class="dashboard-service-name" id="dash-st-name">OpenSpeedTest</span>
-                        <span class="dashboard-service-state" id="dash-st-text">Checking…</span>
-                        <span class="dashboard-service-latency" id="dash-st-latency">-- ms</span>
+                        <span class="dashboard-service-status">
+                            <span class="dot" aria-hidden="true"></span>
+                            <span class="dashboard-service-state" id="dash-st-text">Checking…</span>
+                        </span>
+                        <span class="dashboard-service-latency" id="dash-st-latency">Latency: -- ms</span>
                     </div>
                     <div class="dashboard-service" id="dash-mu-status">
-                        <span class="dot" aria-hidden="true"></span>
                         <span class="dashboard-service-name" id="dash-mu-name">Muse</span>
-                        <span class="dashboard-service-state" id="dash-mu-text">Checking…</span>
-                        <span class="dashboard-service-latency" id="dash-mu-latency">-- ms</span>
+                        <span class="dashboard-service-status">
+                            <span class="dot" aria-hidden="true"></span>
+                            <span class="dashboard-service-state" id="dash-mu-text">Checking…</span>
+                        </span>
+                        <span class="dashboard-service-latency" id="dash-mu-latency">Latency: -- ms</span>
                     </div>
                 </div>
                 <details class="status-history" id="status-history">
@@ -350,8 +360,8 @@ <h2 id="projects-title">Selected projects</h2>
             </a>
         </footer>
     </div>
-    <link href="css/styles.css?v=20260928-servicecards" rel="stylesheet" />
-    <script src="js/app.js?v=20260928-servicecards"></script>
+    <link href="css/styles.css?v=20261022-dashboard-readability-compact" rel="stylesheet" />
+    <script src="js/app.js?v=20261022-dashboard-readability"></script>
 </body>
 
 </html>

js/app.js

@@ -541,7 +541,7 @@ function renderDashboardService(key, lang, L) {
     row.classList.add(`status-${state.status}`);
     setText(`dash-${key}-name`, getServiceLabel(key, lang));
     setText(`dash-${key}-text`, statusLabel);
-    setText(`dash-${key}-latency`, `${state.latency ?? '--'} ms`);
+    setText(`dash-${key}-latency`, `${L.ui.latency}: ${state.latency ?? '--'} ms`);
     row.setAttribute('aria-label', `${getServiceLabel(key, lang)}: ${statusLabel}. ${L.statusSource}`);
 }