fix(experimental): wrap event scope badges on narrow tables

packages/experimental/client-ui-perf/src/client/PerfView.tsx

@@ -1611,8 +1611,10 @@ function eventRow(event: PerfEventMetrics, t: PerfTranslate): ReactElement {
   return (
     <tr className={css.eventRow} title={title}>
       <td className={css.stepCell}>
-        <span className={css.compactionTag}>{eventLabel(event.kind, t)}</span>
-        <span className={css.stepClock}>{formatClock(event.time)}</span>
+        <span className={css.rowTagWhen}>
+          <span className={css.compactionTag}>{eventLabel(event.kind, t)}</span>
+          <span className={css.stepClock}>{formatClock(event.time)}</span>
+        </span>
       </td>
       <td className={css.promptCell}><span className={css.stepWhen}>{side}</span></td>
       <td className={css.stepDid}>{detail}</td>
@@ -1674,8 +1676,10 @@ function compactionRow(
   return (
     <tr className={css.compactionRow} title={t('compaction.title')}>
       <td className={css.stepCell}>
-        <span className={css.compactionTag}>{t('compaction.label')}</span>
-        <span className={css.stepClock}>{range}</span>
+        <span className={css.rowTagWhen}>
+          <span className={css.compactionTag}>{t('compaction.label')}</span>
+          <span className={css.stepClock}>{range}</span>
+        </span>
       </td>
       <td className={cx(css.promptCell, css.stepWhen)} title={model}>{model}</td>
       <td className={css.stepDid}>{parts.join(' · ')}</td>

packages/experimental/client-ui-perf/src/client/perf.module.css

@@ -212,6 +212,46 @@
   font: var(--dsw-font-xxxs-11);
 }
 
+/* Event/compaction scope: the tag and clock share a narrow first column. They
+   wrap instead of overflowing into the trigger/provider column when the table
+   is squeezed. */
+.rowTagWhen {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 6px;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.rowTagWhen .compactionTag {
+  max-width: 100%;
+  margin-right: 0;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.rowTagWhen .stepClock {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.eventRow .stepCell,
+.compactionRow .stepCell {
+  height: auto;
+  min-height: 30px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.eventRow .rowTagWhen,
+.compactionRow .rowTagWhen {
+  max-width: 100%;
+}
+
 .stepWhen {
   display: inline-flex;
   align-items: center;

packages/experimental/client-ui-perf/tests/perf-view.client.spec.tsx

@@ -1024,6 +1024,8 @@ describe('turn rows', () => {
     expect(screen.getByText(say('event.refresh.detail', {
       source: say('event.source.time'), chars: formatChars(16),
     }))).toBeTruthy()
+    const scope = screen.getAllByText(say('event.system-prompt'))[0]?.closest('td')
+    expect(scope?.querySelector('[class*="rowTagWhen"]')?.textContent).toContain(say('event.system-prompt'))
     expect(screen.getAllByText(say('event.approval'))).toHaveLength(7)
     for (const status of ['asked', 'allowed', 'rejected', 'cancelled', 'unavailable'] as const) {
       expect(screen.getAllByText(say(`event.approval.${status}`)).length).toBeGreaterThan(0)