From 9d4dd4767cd3d00179cd83f62d6fb8e251965fa0 Mon Sep 17 00:00:00 2001 From: Adiker Date: Thu, 22 Oct 2026 19:21:32 +0200 Subject: [PATCH 1/2] fix(ui): improve service dashboard readability --- README.md | 6 ++-- css/styles.css | 82 ++++++++++++++++++++++++++++++++------------------ index.html | 46 +++++++++++++++++----------- js/app.js | 2 +- 4 files changed, 86 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 1fa5bce..d36dc38 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,8 @@ 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 +- 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 +221,8 @@ 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 +- 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` diff --git a/css/styles.css b/css/styles.css index 9542abd..6310d6a 100644 --- a/css/styles.css +++ b/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; @@ -1218,7 +1234,7 @@ footer { } .dashboard-services { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: minmax(0, 1fr); } .dashboard-service { @@ -1309,6 +1325,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; diff --git a/index.html b/index.html index 7223d3a..cc45690 100644 --- a/index.html +++ b/index.html @@ -80,39 +80,49 @@

Service status

0/5 online - Last update: -- + Last update: --
- Jellyfin - Checking… - -- ms + + + Checking… + + Latency: -- ms
- FileBrowser - Checking… - -- ms + + + Checking… + + Latency: -- ms
- autobrr - Checking… - -- ms + + + Checking… + + Latency: -- ms
- OpenSpeedTest - Checking… - -- ms + + + Checking… + + Latency: -- ms
- Muse - Checking… - -- ms + + + Checking… + + Latency: -- ms
@@ -350,8 +360,8 @@

Selected projects

- - + + diff --git a/js/app.js b/js/app.js index 84bd2ed..41138d0 100644 --- a/js/app.js +++ b/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}`); } From aefabef3f1e8003250a7789aed1dc8c1a0a8a575 Mon Sep 17 00:00:00 2001 From: Adiker Date: Thu, 22 Oct 2026 19:41:21 +0200 Subject: [PATCH 2/2] fix(ui): preserve desktop dashboard height --- README.md | 2 ++ css/styles.css | 21 +++++++++++++++++++++ index.html | 2 +- 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d36dc38..ce77c47 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ server. - Responsive service tabs with a compact status overview and one focused detail card; the entire card links to services with a web interface - 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 @@ -222,6 +223,7 @@ albo dowolnym serwerze statycznym. - Responsywne zakładki usług z kompaktowym podsumowaniem i jednym aktywnym panelem szczegółów; cała karta prowadzi do usług z interfejsem WWW - 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 diff --git a/css/styles.css b/css/styles.css index 6310d6a..7aeb2d0 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1134,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)); diff --git a/index.html b/index.html index cc45690..49e64ce 100644 --- a/index.html +++ b/index.html @@ -360,7 +360,7 @@

Selected projects

- +