Mute the workload history hover hint

The one-time "Hover a guest to preview history" tip in the guest
toolbar had no colour class, so it rendered in body-text white while
every control around it (View, Add filter, the History label) is muted
slate. A passive tip outshone the controls and read as a stray label.
It now uses the muted token, so it reads as a caption for the History
range control it explains. Reveal, clear-on-hover and phone hiding are
unchanged.

The README workspace capture and social preview are refreshed from
the same build so they show the muted hint.

Contract-Neutral: Hint colour token only; no change to what the workloads toolbar shows or when
This commit is contained in:
rcourtman
2026-10-22 10:24:07 +01:00
parent 79709eea0f
commit 4809e1085f
5 changed files with 41 additions and 4 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 426 KiB

After

Width:  |  Height:  |  Size: 425 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 256 KiB

After

Width:  |  Height:  |  Size: 255 KiB

@@ -0,0 +1,36 @@
{
"version": 1,
"base_sha": "79709eea0fdc9262437bb7b31deddd1f6c24ba19",
"verified_at": "2026-10-22T09:23:38Z",
"result": "passed",
"changed_paths": [
"frontend-modern/src/components/Workloads/WorkloadsFilter.tsx"
],
"content_sha256": {
"frontend-modern/src/components/Workloads/WorkloadsFilter.tsx": "0d81265e207264a848b490c5a3b0c7ee49607aff2c49397c45a6504c2af48cac"
},
"routes": [
"/proxmox/overview"
],
"viewports": [
{
"width": 1280,
"height": 800
},
{
"width": 390,
"height": 844
}
],
"states": [
"mock demo estate (8 nodes, 77 guests), bars mode, history hover, first visit: hint shown in the muted control tone (rgb 148,163,184, same as the View button) beside the History range control",
"after the first populated row preview: hint hidden with its box kept, toolbar and table unchanged",
"after reload once the hint was seen: hint not rendered",
"390px phone width: hint not rendered"
],
"interactions": [
"hovered a guest row to open the history preview and clear the hint",
"reloaded the overview to confirm the seen hint stays gone",
"compared computed colours of the hint and the View button at 1280px"
]
}
@@ -455,7 +455,7 @@ export const WorkloadsFilter: Component<WorkloadsFilterProps> = (props) => {
<div class="flex items-center gap-2">
<Show when={historyHintSlotReserved()}>
<span
class={`hidden whitespace-nowrap text-[11px] lg:inline ${
class={`hidden whitespace-nowrap text-[11px] text-muted lg:inline ${
props.metricHistoryHintVisible?.() ? '' : 'invisible'
}`.trim()}
data-testid="workload-history-hover-hint"
@@ -313,9 +313,10 @@ describe('WorkloadsFilter', () => {
/>
));
expect(screen.getByTestId('workload-history-hover-hint')).toHaveTextContent(
'Hover a guest to preview history',
);
const hint = screen.getByTestId('workload-history-hover-hint');
expect(hint).toHaveTextContent('Hover a guest to preview history');
// A passive tip reads below the toolbar's controls, not brighter than them.
expect(hint).toHaveClass('text-muted');
unmount();
render(() => (