diff --git a/plugins/docker/templates/docker/widget_resources.html b/plugins/docker/templates/docker/widget_resources.html
index fa086c7..970f92e 100644
--- a/plugins/docker/templates/docker/widget_resources.html
+++ b/plugins/docker/templates/docker/widget_resources.html
@@ -23,7 +23,8 @@
| Container | Host |
- CPU | Memory |
+ CPU · last {{ hours }}h |
+ Memory · last {{ hours }}h |
{% for r in rows %}
{% set u = r.usage %}
@@ -35,16 +36,16 @@
{{- bars(r.cpu_bars, (cores(r.cpu_bars.peak) ~ " cores") if r.cpu_bars.peak is not none else "", cores(r.cpu_bars.roof) ~ " cores") -}}
- {%- if u.cores is none %}—{% else %}{{ cores(u.cores) }} cores{% endif -%}
+ {% if u.cores is none %}—{% else %}{{ cores(u.cores) }} cores{% endif %}
|
{{- bars(r.mem_bars, r.mem_bars.peak|bytes if r.mem_bars.peak is not none else "", r.mem_bars.roof|bytes) -}}
- {%- if u.mem_bytes is none %}—{% else %}{{ u.mem_bytes|bytes }}{% endif -%}
+ {% if u.mem_bytes is none %}—{% else %}{{ u.mem_bytes|bytes }}{% endif %}
|
{% endfor %}
-Bars: last {{ hours }}h, each row up to its own peak, at least {{ cores(cpu_floor) }} core{{ 's' if cpu_floor != 1 }} and {{ mem_floor|bytes }}.
+Bars: {{ (hours * 60 // 24) }}-minute slices, oldest left; each row up to its own peak, at least {{ cores(cpu_floor) }} core{{ 's' if cpu_floor != 1 }} and {{ mem_floor|bytes }}.
{% endif %}
diff --git a/steward/static/steward.css b/steward/static/steward.css
index 08f1fe8..ab4077d 100644
--- a/steward/static/steward.css
+++ b/steward/static/steward.css
@@ -406,7 +406,7 @@ body.dash-editing .widget-drawer { transform:translateY(0); }
.w-item .w-label a { color:inherit; text-decoration:none; }
.w-item .w-meta { flex-shrink:0; font-size:0.72rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.w-note { font-size:0.7rem; color:var(--text-dim); margin-top:0.3rem; }
-.w-table col.w-barcol { width:9.5rem; }
+.w-table col.w-barcol { width:10.2rem; }
/* Bars of a figure's recent past, inline before it (Busiest Containers, #5214):
the row's tone, faint, with the newest bar solid. A gap is a slice with no
samples. Heights are set per bar as a % of the row's roof. */
@@ -414,6 +414,8 @@ body.dash-editing .widget-drawer { transform:translateY(0); }
.w-bars i { flex:1; min-height:1px; background:currentColor; opacity:0.4; border-radius:1px 1px 0 0; }
.w-bars i:last-child { opacity:1; }
.w-bars i.gap { background:none; }
+/* The figure after a row of bars takes a fixed width, so the bars line up down the column whatever the figure's length. */
+.w-fig { display:inline-block; min-width:4.9rem; text-align:right; }
@container (max-width: 26rem) { .w-wide-only { display:none; } .w-table col.w-barcol { width:5.5rem; } }