Let Coverage restore evidence details wrap (#3121)

Let Coverage restore evidence details wrap

The Coverage drawer's restore evidence ran long snapshot descriptions
("checkout-web-02 local rollback snapshot") straight past the drawer
edge with no tooltip. The cells asked for whitespace-normal, but the
global `.table-fixed td` rule forces nowrap and outranks a utility
class on the cell, so the request did nothing.

Put the wrap on each value's span instead, the way the shared drawer
detail tables already do, and pin it in the Coverage test.
This commit is contained in:
rcourtman
2026-10-22 21:09:20 +01:00
committed by GitHub
6 changed files with 72 additions and 5 deletions
@@ -10056,3 +10056,12 @@ Services and Protection tables now do this for `?q=`, as the Kubernetes tables
already did, so `RecordOwnerLink` can land on a narrowed tab whose own search
box shows and clears the filter. `ArtifactSourceBadge` takes the opt-in
`MetadataBadge` `wrap` for drawer use; table rows keep the one-line badge.
`.table-fixed td` and `th` (index.css, `@layer utilities`) set nowrap,
hidden overflow and an ellipsis, and the class-plus-element selector outranks
a single utility class such as `whitespace-normal` on the cell itself, so that
class on a fixed-table cell does nothing (the rule also reaches cells of a
table nested in a drawer row). A value that must wrap sets the wrap on its own
element inside the cell, as `DetailSectionTable` does with
`block whitespace-normal`; the Coverage drawer's restore evidence Location and
Details values now follow that pattern.
@@ -7147,3 +7147,9 @@ The Coverage drawer's restore evidence wraps long source labels (snapshot and
archive names) instead of cutting them with an ellipsis: `ArtifactSourceBadge`
takes an opt-in `wrap` that the drawer passes, while table rows keep the label
on one line. Coverage, restore evidence and recovery rules are unchanged.
The Coverage drawer's restore evidence Location and Details values wrap: the
wrap is set on each value's span, because the global `.table-fixed td` rule
forces nowrap on table cells and outranks a utility class on the cell itself,
which left a long snapshot description cut off at the drawer edge. Coverage,
restore evidence and recovery rules are unchanged.
@@ -8668,3 +8668,8 @@ whole fleet; the fleet list is reconciled by resource id so a live snapshot
updates the open drawer in place rather than remounting it, and closing it from
its header returns focus to the tile. No resource identity, status or
availability rule changes.
The Proxmox Coverage drawer's restore evidence values (location and details)
wrap on their own spans rather than through the table cell, so a long snapshot
description no longer runs past the drawer edge. No resource identity, status
or recovery rule changes.
@@ -0,0 +1,40 @@
{
"version": 1,
"base_sha": "863bdbfbeccd4ea302f2bbd6bf5d7f77b8cdce3b",
"verified_at": "2026-10-22T19:47:04Z",
"result": "passed",
"changed_paths": [
"frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx"
],
"content_sha256": {
"frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx": "d34d14641fcb826d43d269fb11ba8ddf6b882964c30c378793f209dd7ecfd60f"
},
"routes": [
"/proxmox/backups/coverage"
],
"viewports": [
{
"width": 1440,
"height": 900
},
{
"width": 390,
"height": 844
}
],
"states": [
"Embedded production build of this change on the full mock estate, signed in through the real login",
"Coverage drawer for checkout-web-02 (VM 101): the restore evidence Details value \"checkout-web-02 local rollback snapshot\" wraps onto a second line inside its cell instead of running past the drawer edge",
"Coverage drawers for backup-vault and checkout-web-02 report no clipped values at 1440 and 390; on the phone the Details and Location columns stay hidden by the layout",
"No console or page errors at either width"
],
"interactions": [
"Expanding a Coverage row opens its drawer; the drawer header's collapse button closes it"
],
"browser": {
"client": "playwright 1.62.1",
"engine": "Chromium",
"version": "chromium-1234 headless"
},
"scope": "Full authenticated application on a mock estate; mock data, not live provider connections."
}
@@ -625,11 +625,13 @@ export function ProxmoxCoverageTable(props: {
'location',
)}
>
{/* Wrapping is set on the span: `.table-fixed td`
forces nowrap on the cell and outranks a class there. */}
<TableCell
class={`${getPlatformTableCellClassForKind('text')} whitespace-normal text-base-content`}
class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
>
<span
class="block wrap-anywhere"
class="block whitespace-normal wrap-anywhere"
data-coverage-evidence-location
>
{artifact.location}
@@ -673,10 +675,10 @@ export function ProxmoxCoverageTable(props: {
)}
>
<TableCell
class={`${getPlatformTableCellClassForKind('text')} whitespace-normal text-base-content`}
class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
>
<span
class="block wrap-anywhere"
class="block whitespace-normal wrap-anywhere"
title={artifact.detailTitle}
data-coverage-evidence-detail
>
@@ -221,9 +221,14 @@ describe('ProxmoxCoverageTable column visibility', () => {
);
// Restore evidence leads; provider quality is a section, not a grid.
expect(within(panel).getByText('Restore evidence')).toBeInTheDocument();
// `.table-fixed td` forces nowrap on cells, so the wrap lives on the span.
const location = panel.querySelector('[data-coverage-evidence-location]');
expect(location).toHaveClass('wrap-anywhere');
expect(location).toHaveClass('whitespace-normal', 'wrap-anywhere');
expect(location).not.toHaveClass('truncate');
expect(panel.querySelector('[data-coverage-evidence-detail]')).toHaveClass(
'whitespace-normal',
'wrap-anywhere',
);
// The source label wraps in the drawer too; a long snapshot name is not cut.
expect(within(panel).getByText('PBS', { selector: 'td span' })).toHaveClass(
'whitespace-normal',