@shipfox/client-workflows 16.0.0 → 17.0.0

package/src/components/step-list/step-list.test.tsx

@@ -92,6 +92,35 @@ describe('StepList', () => {
     ).toBeInTheDocument();
   });
 
+  test('opens the inspector without expanding the step log', async () => {
+    const user = userEvent.setup();
+    const attempt = makeAttempt({status: 'succeeded'});
+    const step = makeStep({name: 'deploy', attempts: [attempt]});
+
+    function InspectableStepList() {
+      const [inspectorOpenAttemptId, setInspectorOpenAttemptId] = useState<string | null>(null);
+
+      return (
+        <StepList
+          job={makeJob({steps: [step]})}
+          inspectorOpenAttemptId={inspectorOpenAttemptId}
+          onInspectorOpenChange={setInspectorOpenAttemptId}
+          renderExpandedStep={({attemptId}) => <Text size="sm">logs for {attemptId}</Text>}
+          renderInspector={(entry) => <Text size="sm">inspector for {entry.id}</Text>}
+        />
+      );
+    }
+
+    render(<InspectableStepList />);
+
+    const deploy = screen.getByRole('button', {name: 'deploy, Succeeded, attempt 1'});
+    await user.click(screen.getByRole('button', {name: 'Inspect deploy, attempt 1'}));
+
+    expect(deploy).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText(`logs for ${attempt.id}`)).not.toBeInTheDocument();
+    expect(screen.getByText(`inspector for ${attempt.id}`)).toBeInTheDocument();
+  });
+
   test('keeps multiple expanded rows open', async () => {
     const user = userEvent.setup();
     const buildAttempt = makeAttempt({status: 'succeeded'});
@@ -180,8 +209,8 @@ describe('StepList', () => {
     await user.click(buildRow);
     await user.click(deployRow);
 
-    expect(buildRow).not.toHaveClass('bg-background-components-hover');
-    expect(deployRow).toHaveClass('bg-background-components-hover');
+    expect(buildRow.parentElement?.parentElement).not.toHaveClass('bg-background-components-hover');
+    expect(deployRow.parentElement?.parentElement).toHaveClass('bg-background-components-hover');
   });
 
   test('opens a default selected attempt', () => {
@@ -280,6 +309,50 @@ describe('StepList', () => {
     expect(screen.getByText(`logs for ${deployAttempt.id}`)).toBeInTheDocument();
   });
 
+  test('does not auto-open inspectors for failed landing attempts', async () => {
+    const user = userEvent.setup();
+    const firstAttempt = makeAttempt({id: 'failed-attempt-first', status: 'failed'});
+    const secondAttempt = makeAttempt({id: 'failed-attempt-second', status: 'failed'});
+    const firstJob = makeJob({
+      id: 'job-first',
+      steps: [makeStep({name: 'build', status: 'failed', attempts: [firstAttempt]})],
+    });
+    const secondJob = makeJob({
+      id: 'job-second',
+      steps: [makeStep({name: 'deploy', status: 'failed', attempts: [secondAttempt]})],
+    });
+
+    function InspectableStepList({job, defaultAttemptId}: {job: Job; defaultAttemptId: string}) {
+      const [inspectorOpenAttemptId, setInspectorOpenAttemptId] = useState<string | null>(null);
+
+      return (
+        <StepList
+          job={job}
+          defaultSelectedAttemptId={defaultAttemptId}
+          inspectorOpenAttemptId={inspectorOpenAttemptId}
+          onInspectorOpenChange={setInspectorOpenAttemptId}
+          renderExpandedStep={({attemptId}) => <Text size="sm">logs for {attemptId}</Text>}
+          renderInspector={(entry) => <Text size="sm">inspector open {entry.id}</Text>}
+        />
+      );
+    }
+
+    const {rerender} = render(
+      <InspectableStepList job={firstJob} defaultAttemptId={firstAttempt.id} />,
+    );
+
+    expect(screen.queryByText(`inspector open ${firstAttempt.id}`)).not.toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole('button', {name: `Inspect build, attempt ${firstAttempt.attempt}`}),
+    );
+    expect(screen.getByText(`inspector open ${firstAttempt.id}`)).toBeInTheDocument();
+
+    rerender(<InspectableStepList job={secondJob} defaultAttemptId={secondAttempt.id} />);
+
+    expect(screen.queryByText(`inspector open ${secondAttempt.id}`)).not.toBeInTheDocument();
+  });
+
   test('does not replace the landing selection when a live job reports a new candidate', () => {
     const firstAttempt = makeAttempt({status: 'running'});
     const secondAttempt = makeAttempt({status: 'running'});

package/src/components/step-list/step-list.tsx

@@ -58,9 +58,12 @@ export interface StepListProps {
   selectedAttemptId?: string | null | undefined;
   defaultSelectedAttemptId?: string | undefined;
   onSelectedAttemptChange?: ((attemptId: string | undefined) => void) | undefined;
+  inspectorOpenAttemptId?: string | null | undefined;
+  onInspectorOpenChange?: ((attemptId: string | null) => void) | undefined;
   autoSelectActiveAttempt?: boolean | undefined;
   emptyState?: StepListEmptyState | undefined;
   renderExpandedStep?: ((context: StepExpandedContext) => ReactNode) | undefined;
+  renderInspector?: ((entry: StepListEntryModel) => ReactNode) | undefined;
   showHeader?: boolean | undefined;
   className?: string | undefined;
 }
@@ -71,9 +74,12 @@ export function StepList({
   selectedAttemptId,
   defaultSelectedAttemptId,
   onSelectedAttemptChange,
+  inspectorOpenAttemptId = null,
+  onInspectorOpenChange,
   autoSelectActiveAttempt = false,
   emptyState,
   renderExpandedStep,
+  renderInspector,
   showHeader = true,
   className,
 }: StepListProps) {
@@ -90,9 +96,12 @@ export function StepList({
       selectedAttemptId={selectedAttemptId}
       defaultSelectedAttemptId={defaultSelectedAttemptId}
       onSelectedAttemptChange={onSelectedAttemptChange}
+      inspectorOpenAttemptId={inspectorOpenAttemptId}
+      onInspectorOpenChange={onInspectorOpenChange}
       autoSelectActiveAttempt={autoSelectActiveAttempt}
       emptyState={emptyState}
       renderExpandedStep={renderExpandedStep}
+      renderInspector={renderInspector}
       showHeader={showHeader}
       className={className}
     />
@@ -104,9 +113,12 @@ function StepListContent({
   selectedAttemptId,
   defaultSelectedAttemptId,
   onSelectedAttemptChange,
+  inspectorOpenAttemptId = null,
+  onInspectorOpenChange,
   autoSelectActiveAttempt,
   emptyState,
   renderExpandedStep,
+  renderInspector,
   showHeader,
   className,
 }: Omit<StepListProps, 'job' | 'jobExecution'> & {model: StepListModel}) {
@@ -185,6 +197,15 @@ function StepListContent({
     setUserSelectedAttempt(true);
   }, [selectedAttemptId]);
 
+  useEffect(() => {
+    if (
+      inspectorOpenAttemptId !== null &&
+      !model.entries.some((entry) => entry.id === inspectorOpenAttemptId && !entry.carriedOver)
+    ) {
+      onInspectorOpenChange?.(null);
+    }
+  }, [inspectorOpenAttemptId, model.entries, onInspectorOpenChange]);
+
   function selectAttempt(nextAttemptIds: string[]) {
     const nextAttemptId = nextSelectedAttemptId(selectedAttemptIds, nextAttemptIds);
     setUserSelectedAttempt(true);
@@ -193,6 +214,10 @@ function StepListContent({
     onSelectedAttemptChange?.(nextAttemptId);
   }
 
+  const inspectorEntry = model.entries.find(
+    (entry) => entry.id === inspectorOpenAttemptId && !entry.carriedOver,
+  );
+
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
       <section
@@ -203,7 +228,7 @@ function StepListContent({
         )}
       >
         {showHeader ? (
-          <div className="flex min-h-40 items-center border-b border-border-neutral-base px-16 py-8">
+          <div className="flex min-h-40 items-center border-b border-border-neutral-base px-row py-row">
             <Text as="h2" id={titleId} size="sm" bold className="text-foreground-neutral-base">
               {model.jobName}
             </Text>
@@ -220,7 +245,7 @@ function StepListContent({
             asChild
           >
             <ol>
-              {model.entries.map((entry) => {
+              {model.entries.map((entry, index) => {
                 const selected = selectedAttemptIds.includes(entry.id);
                 return (
                   <StepRow
@@ -228,6 +253,7 @@ function StepListContent({
                     entry={entry}
                     selected={selected}
                     hasExpandedContent={hasExpandedContent}
+                    isLast={index === model.entries.length - 1}
                     onSelect={() => {
                       selectAttempt(
                         hasExpandedContent
@@ -237,6 +263,11 @@ function StepListContent({
                             : [entry.id],
                       );
                     }}
+                    onInspect={
+                      onInspectorOpenChange && !entry.carriedOver
+                        ? () => onInspectorOpenChange(entry.id)
+                        : undefined
+                    }
                     expandedContent={
                       selected
                         ? renderExpandedStep?.({
@@ -260,6 +291,7 @@ function StepListContent({
           </Accordion>
         )}
       </section>
+      {inspectorEntry ? renderInspector?.(inspectorEntry) : null}
     </TimeTickerProvider>
   );
 }
@@ -275,7 +307,7 @@ function StepListEmptyStateView({
   if (!emptyState.status) {
     return (
       <EmptyState
-        className="min-h-120 px-16 py-20"
+        className="min-h-120 p-panel"
         icon="componentLine"
         title={emptyState.title}
         description={emptyState.description}
@@ -285,7 +317,7 @@ function StepListEmptyStateView({
   }
 
   return (
-    <div className="flex min-h-120 flex-col items-center justify-center gap-10 px-16 py-20">
+    <div className="flex min-h-120 flex-col items-center justify-center gap-inline p-panel">
       <StepListEmptyStateIcon status={emptyState.status} />
       <div className="text-center">
         <Text size="sm" className="text-foreground-neutral-subtle">
@@ -302,14 +334,14 @@ function StepListEmptyStateView({
 function StepListEmptyStateIcon({status}: {status: JobDisplayStatus}) {
   if (status !== 'running') {
     return (
-      <div className="flex size-32 items-center justify-center rounded-6 border border-border-neutral-strong bg-background-neutral-base p-8">
+      <div className="flex size-32 items-center justify-center rounded-6 border border-border-neutral-strong bg-background-neutral-base p-tight">
         <WorkflowStatusIcon status={status} size={20} tooltip={false} />
       </div>
     );
   }
 
   return (
-    <div className="flex size-32 items-center justify-center rounded-6 border border-border-neutral-strong bg-background-neutral-base p-8 text-foreground-neutral-muted">
+    <div className="flex size-32 items-center justify-center rounded-6 border border-border-neutral-strong bg-background-neutral-base p-tight text-foreground-neutral-muted">
       <Icon name="timerLine" size={18} aria-hidden="true" />
     </div>
   );
@@ -319,13 +351,17 @@ function StepRow({
   entry,
   selected,
   hasExpandedContent,
+  isLast,
   onSelect,
+  onInspect,
   expandedContent,
 }: {
   entry: StepListEntryModel;
   selected: boolean;
   hasExpandedContent: boolean;
+  isLast: boolean;
   onSelect: () => void;
+  onInspect?: (() => void) | undefined;
   expandedContent: ReactNode;
 }) {
   const shouldShowLabelTooltip = entry.step.label.length > 32;
@@ -341,7 +377,7 @@ function StepRow({
       />
       <StepStatusIcon entry={entry} />
       <div className="min-w-0 flex-1">
-        <div className="flex min-w-0 items-center gap-8">
+        <div className="flex min-w-0 items-center gap-inline">
           <Text size="sm" bold className="truncate text-foreground-neutral-base">
             {entry.step.label}
           </Text>
@@ -353,8 +389,7 @@ function StepRow({
     </>
   );
   const rowClasses = cn(
-    'group grid min-h-44 w-full grid-cols-[14px_14px_minmax(0,1fr)_auto] items-center gap-x-8 px-12 py-6 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none',
-    selected && 'bg-background-components-hover',
+    'group flex min-h-44 min-w-0 flex-1 items-center gap-x-inline bg-transparent px-row py-row text-left transition-colors hover:bg-transparent active:bg-transparent focus-visible:shadow-border-interactive-with-active focus-visible:outline-none',
     entry.carriedOver && 'opacity-[0.55]',
   );
   const button = hasExpandedContent ? (
@@ -388,15 +423,33 @@ function StepRow({
   );
   const row = (
     <>
-      {triggerNode}
+      <div
+        className={cn(
+          'group flex min-w-0 items-center gap-inline pr-[8px] transition-colors hover:bg-background-components-hover active:bg-background-components-pressed',
+          selected && 'bg-background-components-hover',
+          !hasExpandedContent && ['border-b border-border-neutral-base', isLast && 'border-b-0'],
+        )}
+      >
+        <div className="min-w-0 flex-1">{triggerNode}</div>
+        {onInspect ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={`Inspect ${entry.step.label}, attempt ${entry.attempt}`}
+                onClick={onInspect}
+                className="flex size-28 shrink-0 items-center justify-center rounded-4 bg-transparent text-foreground-neutral-muted outline-none transition-colors hover:bg-transparent hover:text-foreground-neutral-base active:bg-transparent focus-visible:shadow-button-neutral-focus"
+              >
+                <Icon name="informationLine" size={14} aria-hidden="true" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Inspect step details</TooltipContent>
+          </Tooltip>
+        ) : null}
+      </div>
       {selected && expandedContent ? (
-        <AccordionContent className="border-t border-border-neutral-base bg-background-neutral-base px-12 py-12">
-          <div className="grid grid-cols-[14px_14px_minmax(0,1fr)_auto] gap-x-8">
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-            <div className="min-w-0">{expandedContent}</div>
-            <span aria-hidden="true" />
-          </div>
+        <AccordionContent className="border-t border-border-neutral-base bg-transparent px-0 py-0">
+          <div className="min-w-0">{expandedContent}</div>
         </AccordionContent>
       ) : null}
     </>
@@ -410,7 +463,7 @@ function StepRow({
     );
   }
 
-  return <li className="border-b border-border-neutral-base last:border-b-0">{row}</li>;
+  return <li>{row}</li>;
 }
 
 function CarriedOverBadge() {
@@ -482,10 +535,10 @@ const attemptChipClasses: Record<NonNullable<BadgeVariant>, string> = {
 
 function StepAttemptChip({attempt}: {attempt: StepAttemptModel}) {
   return (
-    <div className="flex shrink-0 items-center gap-4" aria-hidden="true">
+    <div className="flex shrink-0 items-center gap-tight" aria-hidden="true">
       <span
         className={cn(
-          'inline-flex h-18 min-w-24 items-center justify-center rounded-4 border px-6 font-code text-xs leading-16 text-foreground-neutral-base',
+          'inline-flex h-18 min-w-24 items-center justify-center rounded-4 border px-tight font-code text-xs leading-16 text-foreground-neutral-base',
           attemptChipClasses[attempt.statusVisual.badge ?? 'neutral'],
         )}
       >

package/src/components/workflow-run-duration-label.tsx

@@ -121,7 +121,7 @@ function DurationText({
       variant="label"
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex shrink-0 items-center gap-4 tabular-nums text-foreground-neutral-subtle',
+        'inline-flex shrink-0 items-center gap-tight tabular-nums text-foreground-neutral-subtle',
         className,
       )}
     >

package/src/components/workflow-run-list/job-status-strip.tsx

@@ -74,9 +74,9 @@ export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
         <span
           role="img"
           aria-label={summary}
-          className={cn('inline-flex items-center gap-3', className)}
+          className={cn('inline-flex items-center gap-[3px]', className)}
         >
-          <span aria-hidden="true" className="inline-flex items-center gap-3">
+          <span aria-hidden="true" className="inline-flex items-center gap-[3px]">
             {visible.map((job) => (
               <WorkflowStatusIcon
                 key={job.id}
@@ -89,7 +89,7 @@ export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
               />
             ))}
             {hiddenCount > 0 && overflowStatus ? (
-              <span className="inline-flex items-center gap-2">
+              <span className="inline-flex items-center gap-[2px]">
                 <WorkflowStatusIcon
                   status={overflowStatus}
                   size={GLYPH_SIZE}
@@ -127,17 +127,17 @@ function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary:
   const remaining = notableTotal - named.length;
 
   return (
-    <span className="block max-w-[280px]">
+    <span className="flex max-w-[280px] flex-col gap-tight">
       <Text as="span" size="xs" className="block">
         {summary}
       </Text>
       {named.map((job) => (
-        <Code as="span" variant="label" key={job.id} className="mt-2 block truncate">
+        <Code as="span" variant="label" key={job.id} className="block truncate">
           {getWorkflowStatusVisual(job.status).label.toLowerCase()} · {job.name ?? job.key}
         </Code>
       ))}
       {remaining > 0 ? (
-        <Text as="span" size="xs" className="mt-2 block text-foreground-neutral-muted">
+        <Text as="span" size="xs" className="block text-foreground-neutral-muted">
           and {remaining} more
         </Text>
       ) : null}

package/src/components/workflow-run-list/workflow-run-filter-menu.tsx

@@ -65,7 +65,7 @@ export function WorkflowRunFilterMenu({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="max-h-[320px] w-[240px] overflow-y-auto">
         {options.length === 0 ? (
-          <Text as="p" size="xs" className="px-8 py-6 text-foreground-neutral-muted">
+          <Text as="p" size="xs" className="px-tight py-[6px] text-foreground-neutral-muted">
             {emptyMessage}
           </Text>
         ) : (

package/src/components/workflow-run-list/workflow-run-filters.tsx

@@ -53,7 +53,7 @@ export function WorkflowRunFilters({
   const [sheetOpen, setSheetOpen] = useState(false);
 
   return (
-    <div className="flex flex-wrap items-center gap-8">
+    <div className="flex flex-wrap items-center gap-inline">
       <Input
         value={search.search ?? ''}
         onChange={(event) => onChange({search: event.target.value})}
@@ -64,7 +64,7 @@ export function WorkflowRunFilters({
         iconLeft={<Icon name="searchLine" className="size-14 text-foreground-neutral-muted" />}
       />
 
-      <div className="hidden flex-wrap items-center gap-8 md:flex">
+      <div className="hidden flex-wrap items-center gap-inline md:flex">
         <WorkflowRunFilterControls search={search} facets={facets} onChange={onChange} />
         {hasActiveFilters ? <ClearFiltersButton onClear={onClear} /> : null}
       </div>
@@ -85,7 +85,7 @@ export function WorkflowRunFilters({
           <SheetHeader>
             <SheetTitle>Filter runs</SheetTitle>
           </SheetHeader>
-          <SheetBody className="flex flex-col gap-12">
+          <SheetBody className="flex flex-col gap-cluster">
             <WorkflowRunFilterControls
               search={search}
               facets={facets}
@@ -161,7 +161,7 @@ function WorkflowRunFilterControls({
         className={controlClassName}
       />
       {stacked ? (
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-inline">
           <Label>Created between</Label>
           <RunDateRangeFilter search={search} onChange={onChange} />
         </div>

package/src/components/workflow-run-list/workflow-run-list-states.tsx

@@ -24,7 +24,7 @@ export function WorkflowRunListSkeleton() {
         <div
           // biome-ignore lint/suspicious/noArrayIndexKey: skeleton row, stable position
           key={index}
-          className="flex items-center gap-10 px-12 py-8 @min-[976px]:h-44 @min-[976px]:py-0"
+          className="flex items-center gap-inline px-row py-row @min-[976px]:h-44 @min-[976px]:py-0"
         >
           <Skeleton className="size-14 shrink-0 rounded-full" />
           <Skeleton className="h-12 w-[220px] max-w-[40%]" />
@@ -44,9 +44,9 @@ export function WorkflowRunListSkeleton() {
  */
 export function WorkflowRunListStaleError({query}: {query: QueryLoadErrorQuery}) {
   return (
-    <div className="pb-8">
+    <div className="pb-[8px]">
       <Callout role="alert" type="error">
-        <div className="flex items-center justify-between gap-8">
+        <div className="flex items-center justify-between gap-inline">
           <Text size="xs">Could not refresh workflow runs.</Text>
           <Button
             type="button"
@@ -116,7 +116,7 @@ export function WorkflowRunListNoMatches({
   onLoadMore?: () => void;
 }) {
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-inline">
       {isFetchNextPageError ? (
         <Callout role="alert" type="error">
           Could not load more workflow runs. Try again to continue searching older runs.
@@ -131,7 +131,7 @@ export function WorkflowRunListNoMatches({
             : 'No run matches these filters.'
         }
         action={
-          <div className="flex flex-wrap justify-center gap-8">
+          <div className="flex flex-wrap justify-center gap-inline">
             {hasNextPage && onLoadMore ? (
               <Button
                 type="button"
@@ -167,7 +167,7 @@ export function WorkflowRunListLoadMore({
   if (!hasNextPage || !onLoadMore) return null;
 
   return (
-    <div className="flex flex-col items-center gap-8 border-t border-border-neutral-base py-12">
+    <div className="flex flex-col items-center gap-inline border-t border-border-neutral-base py-row">
       {isFetchNextPageError ? (
         <Callout role="alert" type="error">
           Could not load more workflow runs. Try again.

package/src/components/workflow-run-list/workflow-run-list-view.tsx

@@ -58,7 +58,7 @@ export function WorkflowRunListView({
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
       <section
         aria-labelledby={headingId}
-        className={cn('flex min-h-0 min-w-0 flex-1 flex-col gap-12', className)}
+        className={cn('flex min-h-0 min-w-0 flex-1 flex-col gap-cluster', className)}
       >
         {/* The tab strip above already reads "Runs", so the page heading is for structure and
             assistive tech rather than a second visible title competing with it. */}

package/src/components/workflow-run-list/workflow-run-row.tsx

@@ -81,15 +81,15 @@ export function WorkflowRunRow({
     <>
       <WorkflowStatusIcon status={display.status} size={14} className="shrink-0" />
 
-      <div className="flex min-w-0 flex-1 flex-col gap-2 @min-[976px]:flex-row @min-[976px]:items-center @min-[976px]:gap-12">
-        <span className="flex min-w-0 items-center gap-8 @min-[976px]:flex-1">
+      <div className="flex min-w-0 flex-1 flex-col gap-tight @min-[976px]:flex-row @min-[976px]:items-center @min-[976px]:gap-cluster">
+        <span className="flex min-w-0 items-center gap-inline @min-[976px]:flex-1">
           <Code variant="label" bold className="truncate text-foreground-neutral-base">
             {run.name}
           </Code>
           {run.number !== null ? <WorkflowRunNumberLabel run={run} /> : null}
         </span>
 
-        <span className="flex min-w-0 flex-wrap items-center gap-10 text-foreground-neutral-subtle @min-[976px]:flex-nowrap @min-[976px]:shrink-0">
+        <span className="flex min-w-0 flex-wrap items-center gap-inline text-foreground-neutral-subtle @min-[976px]:flex-nowrap @min-[976px]:shrink-0">
           {run.triggerDisplayLabel ? <TriggerLabel run={run} /> : null}
           {branch ? <BranchLabel branch={branch} isPullRequest={branch.startsWith('#')} /> : null}
           {commit ? <CommitLabel commit={commit} /> : null}
@@ -97,7 +97,7 @@ export function WorkflowRunRow({
         </span>
       </div>
 
-      <span className="flex shrink-0 items-center gap-12">
+      <span className="flex shrink-0 items-center gap-cluster">
         {/* Fixed at the strip's worst case (see MAX_VISIBLE_JOBS) so the overflow count cannot
             paint over the duration, and kept even when a run has no jobs planned yet, so the
             numerics stay in line down the list instead of stepping in and out. */}
@@ -120,7 +120,7 @@ export function WorkflowRunRow({
   // Rows run edge to edge inside the list's scroll container, which would clip the standard
   // outset focus ring, so this one is inset per the design system's focus-ring rule.
   const rowClassName =
-    'flex w-full min-w-0 items-center gap-10 px-12 py-8 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)] focus-visible:outline-none @min-[976px]:h-44 @min-[976px]:py-0';
+    'flex w-full min-w-0 items-center gap-inline px-row py-row text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)] focus-visible:outline-none @min-[976px]:h-44 @min-[976px]:py-0';
 
   // Optimistic manual runs (temp-<uuid>) have no detail page until the canonical row
   // replaces them on the next poll, so they render non-interactively instead of as a link
@@ -164,7 +164,7 @@ function TriggerLabel({run}: {run: WorkflowRunListItem}) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <span className="flex min-w-0 max-w-[140px] items-center gap-6 outline-none">
+        <span className="flex min-w-0 max-w-[140px] items-center gap-tight outline-none">
           <TriggerSourceIcon
             provider={run.triggerProvider}
             source={run.triggerSource}
@@ -235,7 +235,7 @@ function MetadataChip({
   children: string;
 }) {
   return (
-    <span className={cn('flex min-w-0 shrink-0 items-center gap-4', className)} title={title}>
+    <span className={cn('flex min-w-0 shrink-0 items-center gap-tight', className)} title={title}>
       <Icon name={icon} className="size-12 shrink-0 text-foreground-neutral-muted" aria-hidden />
       <Code as="span" variant="label" className="min-w-0 truncate">
         {children}

package/src/components/workflow-run-summary/workflow-run-attempt-switcher.tsx

@@ -52,7 +52,7 @@ export function WorkflowRunAttemptSwitcher({
           size="2xs"
           iconRight="arrowDownSLine"
           aria-label={`Switch attempt, currently ${run.runAttempt.attempt} of ${maxAttempt}`}
-          className="h-20 px-4 text-foreground-neutral-subtle hover:text-foreground-neutral-base"
+          className="h-20 px-[4px] text-foreground-neutral-subtle hover:text-foreground-neutral-base"
         >
           <Text as="span" size="xs" className="text-inherit">
             Attempt {run.runAttempt.attempt} of {maxAttempt}

package/src/components/workflow-run-summary/workflow-run-summary.test.tsx

@@ -38,7 +38,7 @@ describe('WorkflowRunSummary', () => {
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(summary).toHaveClass('bg-background-neutral-background', 'px-16');
+    expect(summary).toHaveClass('bg-background-neutral-background', 'px-row', 'py-row');
     expect(summary.firstElementChild).not.toHaveClass('max-w-[1120px]');
     expect(within(summary).getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();
     expect(within(summary).getAllByText('Running')).not.toHaveLength(0);

package/src/components/workflow-run-summary/workflow-run-summary.tsx

@@ -1,4 +1,5 @@
 import {TriggerSourceIcon} from '@shipfox/client-triggers';
+import {MetadataSeparator} from '@shipfox/client-ui';
 import {Badge} from '@shipfox/react-ui/badge';
 import {Button} from '@shipfox/react-ui/button';
 import {
@@ -77,10 +78,13 @@ export function WorkflowRunSummary({
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <section aria-labelledby={headingId} className="bg-background-neutral-background px-16 py-12">
-        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-12 gap-y-8 overflow-hidden max-[480px]:grid-cols-1">
+      <section
+        aria-labelledby={headingId}
+        className="bg-background-neutral-background px-row py-row"
+      >
+        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-cluster gap-y-inline overflow-hidden max-[480px]:grid-cols-1">
           <div className="col-start-1 row-start-1 min-w-0 max-[480px]:col-start-auto max-[480px]:row-start-auto">
-            <div className="flex min-w-0 items-center gap-8">
+            <div className="flex min-w-0 items-center gap-inline">
               <Badge variant={status.badge} size="xs">
                 <span className="text-center" style={{width: `${STATUS_BADGE_LABEL_WIDTH_CH}ch`}}>
                   {status.label}
@@ -107,7 +111,7 @@ export function WorkflowRunSummary({
           </div>
 
           {hasAction ? (
-            <div className="col-start-2 row-start-1 flex min-w-max items-center gap-6 justify-self-end max-[480px]:col-start-auto max-[480px]:row-start-auto max-[480px]:justify-self-start">
+            <div className="col-start-2 row-start-1 flex min-w-max items-center gap-inline justify-self-end max-[480px]:col-start-auto max-[480px]:row-start-auto max-[480px]:justify-self-start">
               <WorkflowRunActionSlot
                 action={action}
                 cancelling={cancelling}
@@ -118,7 +122,7 @@ export function WorkflowRunSummary({
             </div>
           ) : null}
 
-          <div className="col-span-2 row-start-2 flex min-w-0 items-center gap-12 overflow-hidden text-foreground-neutral-subtle max-[480px]:col-span-1 max-[480px]:row-start-auto">
+          <div className="col-span-2 row-start-2 flex min-w-0 items-center gap-cluster overflow-hidden text-foreground-neutral-subtle max-[480px]:col-span-1 max-[480px]:row-start-auto">
             {run.number !== null ? (
               <>
                 <WorkflowRunNumberLabel run={run} />
@@ -144,7 +148,7 @@ export function WorkflowRunSummary({
                       <button
                         type="button"
                         aria-label={run.triggerLabel}
-                        className="inline-flex max-w-full min-w-0 cursor-help items-center gap-4 rounded-6 border-0 bg-transparent p-0 text-left text-foreground-neutral-subtle outline-none focus-visible:shadow-button-neutral-focus"
+                        className="inline-flex max-w-full min-w-0 cursor-help items-center gap-tight rounded-6 border-0 bg-transparent p-0 text-left text-foreground-neutral-subtle outline-none focus-visible:shadow-button-neutral-focus"
                       >
                         <TriggerSourceIcon
                           provider={run.triggerProvider}
@@ -188,7 +192,7 @@ export function WorkflowRunSummary({
             {blockingJob ? (
               <>
                 <MetadataSeparator />
-                <span className="flex min-w-0 items-center gap-4">
+                <span className="flex min-w-0 items-center gap-tight">
                   <Text as="span" size="xs" className="shrink-0">
                     waiting on
                   </Text>
@@ -310,7 +314,3 @@ function hasFailedOrCancelledJobs(run: WorkflowRunDetail): boolean {
 function workflowRunHasJobs(run: WorkflowRunDetail): run is WorkflowRunDetail & {jobs: Job[]} {
   return 'jobs' in run && Array.isArray(run.jobs);
 }
-
-export function MetadataSeparator() {
-  return <span aria-hidden="true" className="h-12 w-px shrink-0 bg-border-neutral-base" />;
-}