fix(web): clip the suite version cells that still overflow

#1040 clipped the pinned version column in the suite member table and the
version ledger's member list. Two cells in the same feature kept rendering
the same 60+ character immutable snapshot versions unclipped:

- the version ledger's own version cell, in an 84px grid column;
- the bundle operation detail's member cell, in a 90px grid column.

Both bleed into the neighbouring status/visibility columns. Clip them with
the truncate + title pattern used elsewhere in these tables, and assert the
clipped cell in the existing operation-detail test.

Regenerate docs/frontend-analytics-manifest.json: the marker in
suite-bundle-operation-detail.tsx moved three lines down.

Signed-off-by: PerryLink <novelnexusai@outlook.com>
This commit is contained in:
PerryLink 2026-11-01 22:47:18 +08:00
parent a681e43ea6
commit c4c596e1a3
4 changed files with 43 additions and 9 deletions

View file

@ -352,9 +352,9 @@
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":131,"host":"Button","prop":"data-analytics-id","event":"click","ids":["suite.draft.open"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":137,"host":"Button","prop":"data-analytics-id","event":"click","ids":["suite.operation.restart"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":181,"host":"Button","prop":"data-analytics-id","event":"click","ids":["suite.operation.refresh"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":280,"host":"Button","prop":"data-analytics-id","event":"click","ids":["skill.detail.open"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":310,"host":"ConfirmDialog","prop":"confirmAnalyticsId","event":"click","ids":["suite.operation.cancel.confirm"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":310,"host":"ConfirmDialog","prop":"cancelAnalyticsId","event":"click","ids":["suite.operation.cancel.cancel"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":283,"host":"Button","prop":"data-analytics-id","event":"click","ids":["skill.detail.open"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":313,"host":"ConfirmDialog","prop":"confirmAnalyticsId","event":"click","ids":["suite.operation.cancel.confirm"]},
{"file":"web/src/features/suite/suite-bundle-operation-detail.tsx","line":313,"host":"ConfirmDialog","prop":"cancelAnalyticsId","event":"click","ids":["suite.operation.cancel.cancel"]},
{"file":"web/src/features/suite/suite-management-actions.tsx","line":123,"host":"Button","prop":"data-analytics-id","event":"click","ids":["suite.draft.reopen"]},
{"file":"web/src/features/suite/suite-management-actions.tsx","line":128,"host":"Button","prop":"data-analytics-id","event":"click","ids":["suite.version.create"]},
{"file":"web/src/features/suite/suite-management-actions.tsx","line":131,"host":"Button","prop":"data-analytics-id","event":"click","ids":["suite.version.yank"]},

View file

@ -93,6 +93,37 @@ describe('SuiteBundleOperationDetail', () => {
})
})
it('clips a long immutable member version so it cannot bleed into the status column', () => {
const version = `snapshot-${'a'.repeat(60)}`
mocks.operation.data = {
operationId: 'operation-1',
status: 'CANCELLED',
mode: 'CREATE',
targetCoordinate: '@global/care-suite',
targetVersion: '1.0.0',
updatedAt: '2026-09-14T04:00:00Z',
members: [{
position: 0,
redacted: false,
coordinate: '@global/member-under-review',
status: 'CANCELLED',
version,
sourceType: 'PACKAGE',
relationship: 'ADDED',
publishAction: 'CREATE_VERSION',
visibility: 'PUBLIC',
errors: [],
warnings: [],
}],
}
render(<SuiteBundleOperationDetail operationId="operation-1" />)
const cell = screen.getByTitle(`v${version}`)
expect(cell.className).toContain('truncate')
expect(cell.textContent).toBe(`v${version}`)
})
it('explains when a new member Skill does not exist yet', () => {
mocks.operation.data = {
operationId: 'operation-planned',

View file

@ -264,8 +264,11 @@ export function SuiteBundleOperationDetail({ operationId }: { operationId: strin
{member.publishAction ? ` · ${t(`suite.bundle.action.${member.publishAction}`)}` : null}
</p>
) : <span>—</span>}
<p className="font-mono text-xs text-muted-foreground">
{member.visibility ?? '—'}<br />v{member.version ?? '—'}
<p className="min-w-0 font-mono text-xs text-muted-foreground">
{member.visibility ?? '—'}<br />
<span className="block truncate" title={member.version ? `v${member.version}` : undefined}>
v{member.version ?? '—'}
</span>
</p>
<div className="space-y-2">
<span className={cn(

View file

@ -94,14 +94,14 @@ export function SuiteVersionLedger({
<div className="grid gap-1.5 px-3 py-2 text-xs md:grid-cols-[84px_104px_minmax(112px,1fr)_136px_88px] md:items-center md:gap-2.5">
<button data-analytics-id="suite.version.expand"
type="button"
className="flex items-center gap-1.5 text-left font-mono font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70"
className="flex min-w-0 items-center gap-1.5 text-left font-mono font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70"
aria-expanded={expanded}
onClick={() => setExpandedVersion(expanded ? '' : version.version)}
>
{expanded
? <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
: <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />}
v{version.version}
? <ChevronDown className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
: <ChevronRight className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}
<span className="min-w-0 truncate" title={`v${version.version}`}>{`v${version.version}`}</span>
</button>
<span className={cn(
'w-fit rounded-md border px-1.5 py-0.5 text-[11px] font-medium',