From c4c596e1a315aa0128916a32cc9da8394fed9aba Mon Sep 17 00:00:00 2001
From: PerryLink <novelnexusai@outlook.com>
Date: Sun, 1 Nov 2026 22:47:18 +0800
Subject: [PATCH] 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>
---
 docs/frontend-analytics-manifest.json         |  6 ++--
 .../suite-bundle-operation-detail.test.tsx    | 31 +++++++++++++++++++
 .../suite/suite-bundle-operation-detail.tsx   |  7 +++--
 .../features/suite/suite-version-ledger.tsx   |  8 ++---
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/docs/frontend-analytics-manifest.json b/docs/frontend-analytics-manifest.json
index 3b230fb59..6e280c546 100644
--- a/docs/frontend-analytics-manifest.json
+++ b/docs/frontend-analytics-manifest.json
@@ -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"]},
diff --git a/web/src/features/suite/suite-bundle-operation-detail.test.tsx b/web/src/features/suite/suite-bundle-operation-detail.test.tsx
index 7823be0f6..21c086c4e 100644
--- a/web/src/features/suite/suite-bundle-operation-detail.test.tsx
+++ b/web/src/features/suite/suite-bundle-operation-detail.test.tsx
@@ -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',
diff --git a/web/src/features/suite/suite-bundle-operation-detail.tsx b/web/src/features/suite/suite-bundle-operation-detail.tsx
index 4780f4b44..b44ae730e 100644
--- a/web/src/features/suite/suite-bundle-operation-detail.tsx
+++ b/web/src/features/suite/suite-bundle-operation-detail.tsx
@@ -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(
diff --git a/web/src/features/suite/suite-version-ledger.tsx b/web/src/features/suite/suite-version-ledger.tsx
index c2dd2b2af..032cbab29 100644
--- a/web/src/features/suite/suite-version-ledger.tsx
+++ b/web/src/features/suite/suite-version-ledger.tsx
@@ -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',