From b4ddb66d0b0302cdd774a21ff845a10dae2c0b8e Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Wed, 3 Jun 2026 21:20:23 -0700 Subject: [PATCH] Dashboard: harden rate-monitor (enrichment) equalizer responsiveness MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The #rate-monitor-section equalizer had breakpoints but two narrow-bar gaps: - The status pill ("Not configured", "Yielding") is wider than a thin equalizer column and spilled over neighbours — now capped to the bar width with the label truncating via ellipsis. - Wrapped rows were left-aligned (orphan bar stranded) with no vertical gap — now centered with a row-gap so multi-row layouts read intentionally. Plus smaller value/name fonts at <=480px so tiny bars stay legible. --- webui/static/style.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/webui/static/style.css b/webui/static/style.css index 46dcd1dd..8c521124 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -63437,9 +63437,10 @@ body.reduce-effects .dash-card::after { .dash-card[data-card="enrichment"] .rate-monitor-grid--equalizer { --eq-track-h: 124px; flex-wrap: wrap; - justify-content: flex-start; + justify-content: center; + row-gap: 14px; } - .rate-eq { flex: 0 0 calc(20% - 4px); } + .rate-eq { flex: 0 0 calc(20% - 6px); } } @media (max-width: 480px) { @@ -63449,6 +63450,21 @@ body.reduce-effects .dash-card::after { } .rate-eq-avatar { width: 26px; height: 26px; } .rate-eq-avatar-glyph { font-size: 9px; } + .rate-eq-value { font-size: 14px; } + .rate-eq-name { font-size: 9px; } +} + +/* Keep the status pill + name inside their (often narrow) bar — labels like + "Not configured" / "Yielding" are wider than a thin equalizer column and + would otherwise spill over neighbours. Truncate instead of overflow. */ +.rate-eq-state { + max-width: 100%; +} +.rate-eq-state-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; } /* Active downloads container */