diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx
index 291a5465903b0..5e6be3050640a 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillOpJobPartitionsTable.tsx
@@ -60,7 +60,7 @@ export const BackfillOpJobPartitionsTable = ({
         <tr>
           <td>
             <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'baseline'}}>
-              <BackfillTarget backfill={backfill} repoAddress={repoAddress} />
+              <BackfillTarget backfill={backfill} repoAddress={repoAddress} useTags={false} />
               <StatusBar
                 targeted={results.length}
                 inProgress={inProgress.length}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
index 791e91320469b..36ca4fb201b28 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
@@ -12,7 +12,7 @@ import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../../app/QueryRefresh
 import {isHiddenAssetGroupJob} from '../../asset-graph/Utils';
 import {RunStatus} from '../../graphql/types';
 import {PartitionStatus, PartitionStatusHealthSourceOps} from '../../partitions/PartitionStatus';
-import {PipelineReference} from '../../pipelines/PipelineReference';
+import {PipelineReference, PipelineTag} from '../../pipelines/PipelineReference';
 import {AssetKeyTagCollection} from '../../runs/AssetTagCollections';
 import {CreatedByTagCell} from '../../runs/CreatedByTag';
 import {getBackfillPath} from '../../runs/RunsFeedUtils';
@@ -118,7 +118,7 @@ export const BackfillRowContent = ({
       </td>
       {showBackfillTarget ? (
         <td style={{width: '20%'}}>
-          <BackfillTarget backfill={backfill} repoAddress={repoAddress} />
+          <BackfillTarget backfill={backfill} repoAddress={repoAddress} useTags={false} />
         </td>
       ) : null}
       <td style={{width: allPartitions ? 300 : 140}}>
@@ -146,9 +146,11 @@ export const BackfillRowContent = ({
 export const BackfillTarget = ({
   backfill,
   repoAddress,
+  useTags,
 }: {
   backfill: Pick<BackfillTableFragment, 'assetSelection' | 'partitionSet' | 'partitionSetName'>;
   repoAddress: RepoAddress | null;
+  useTags: boolean;
 }) => {
   const repo = useRepository(repoAddress);
   const {assetSelection, partitionSet, partitionSetName} = backfill;
@@ -160,22 +162,30 @@ export const BackfillTarget = ({
       return null;
     }
     if (partitionSet && repo) {
+      const link = workspacePipelinePath({
+        repoName: partitionSet.repositoryOrigin.repositoryName,
+        repoLocation: partitionSet.repositoryOrigin.repositoryLocationName,
+        pipelineName: partitionSet.pipelineName,
+        isJob: isThisThingAJob(repo, partitionSet.pipelineName),
+        path: `/partitions?partitionSet=${encodeURIComponent(partitionSet.name)}`,
+      });
+      if (useTags) {
+        return (
+          <Tag icon="partition_set">
+            <Link to={link}>{partitionSet.name}</Link>
+          </Tag>
+        );
+      }
       return (
-        <Link
-          style={{fontWeight: 500}}
-          to={workspacePipelinePath({
-            repoName: partitionSet.repositoryOrigin.repositoryName,
-            repoLocation: partitionSet.repositoryOrigin.repositoryLocationName,
-            pipelineName: partitionSet.pipelineName,
-            isJob: isThisThingAJob(repo, partitionSet.pipelineName),
-            path: `/partitions?partitionSet=${encodeURIComponent(partitionSet.name)}`,
-          })}
-        >
+        <Link style={{fontWeight: 500}} to={link}>
           {partitionSet.name}
         </Link>
       );
     }
     if (partitionSetName) {
+      if (useTags) {
+        return <Tag icon="partition_set">{partitionSetName}</Tag>;
+      }
       return <span style={{fontWeight: 500}}>{partitionSetName}</span>;
     }
     return null;
@@ -193,10 +203,28 @@ export const BackfillTarget = ({
 
   const buildPipelineOrAssets = () => {
     if (assetSelection?.length) {
-      return <AssetKeyTagCollection assetKeys={assetSelection} dialogTitle="Assets in backfill" />;
+      return (
+        <AssetKeyTagCollection
+          assetKeys={assetSelection}
+          dialogTitle="Assets in backfill"
+          useTags={useTags}
+          maxRows={2}
+        />
+      );
     }
     if (partitionSet && repo) {
-      return (
+      return useTags ? (
+        <PipelineTag
+          showIcon
+          size="small"
+          pipelineName={partitionSet.pipelineName}
+          pipelineHrefContext={{
+            name: partitionSet.repositoryOrigin.repositoryName,
+            location: partitionSet.repositoryOrigin.repositoryLocationName,
+          }}
+          isJob={isThisThingAJob(repo, partitionSet.pipelineName)}
+        />
+      ) : (
         <PipelineReference
           showIcon
           size="small"
@@ -215,11 +243,11 @@ export const BackfillTarget = ({
   const repoLink = buildRepoLink();
   const pipelineOrAssets = buildPipelineOrAssets();
   return (
-    <Box flex={{direction: 'column', gap: 8}}>
+    <Box flex={{direction: 'column', gap: 8, alignItems: 'start'}}>
       {buildHeader()}
       {(pipelineOrAssets || repoLink) && (
         <Box flex={{direction: 'column', gap: 4}} style={{fontSize: '12px'}}>
-          {repoLink}
+          {repoLink && useTags ? <Tag>{repoLink}</Tag> : repoLink}
           {pipelineOrAssets}
         </Box>
       )}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx
index 0a6def3211b08..66ee623b3c9e5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineReference.tsx
@@ -1,6 +1,5 @@
 import {Box, Colors, Icon, Tag} from '@dagster-io/ui-components';
 import {Link} from 'react-router-dom';
-import styled from 'styled-components';
 
 import {PipelineSnapshotLink} from './PipelinePathUtils';
 import {RepoAddress} from '../workspace/types';
@@ -54,7 +53,7 @@ export const PipelineReference = ({
   return (
     <Box flex={{direction: 'row', alignItems: 'center', display: 'inline-flex'}}>
       {showIcon && (
-        <Box margin={{right: 8}}>
+        <Box margin={{right: 4}}>
           <Icon color={Colors.accentGray()} name="job" />
         </Box>
       )}
@@ -71,16 +70,8 @@ export const PipelineReference = ({
 
 export const PipelineTag = (props: Props) => {
   return (
-    <PipelineTagWrap>
-      <Tag tooltipText={props.pipelineName}>
-        <PipelineReference {...props} />
-      </Tag>
-    </PipelineTagWrap>
+    <Tag tooltipText={props.pipelineName} icon="job">
+      <PipelineReference {...props} showIcon={false} />
+    </Tag>
   );
 };
-
-const PipelineTagWrap = styled.span`
-  span {
-    line-height: 0;
-  }
-`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx
index 394ca93f0db74..ca9220bf5177f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx
@@ -9,10 +9,11 @@ import {
   MiddleTruncate,
   Tag,
 } from '@dagster-io/ui-components';
+import useResizeObserver from '@react-hook/resize-observer';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 
-import {displayNameForAssetKey} from '../asset-graph/Utils';
+import {displayNameForAssetKey, tokenForAssetKey} from '../asset-graph/Utils';
 import {
   assetDetailsPathForAssetCheck,
   assetDetailsPathForKey,
@@ -72,84 +73,182 @@ interface AssetKeyTagCollectionProps {
   assetKeys: AssetKey[] | null;
   dialogTitle?: string;
   useTags?: boolean;
+  maxRows?: number;
+}
+
+/** This hook returns a containerRef and a moreLabelRef. It expects you to populate
+ * containerRef with children, with the last child being a "More" button. When your
+ * container renders, children will be hidden until the container is not overflowing
+ * its maxHeight.
+ *
+ * This hook waits for an animation frame but forces layout so you can't see it "trying"
+ * different numbers of tags. To avoid seeing tags wrap while waiting for an animation
+ * frame, place an `overflow: hidden` on the container.
+ */
+export function useAdjustChildVisibilityToFill(moreLabelFn: (count: number) => string | null) {
+  const containerRef = React.createRef<HTMLDivElement>();
+  const moreLabelRef = React.createRef<HTMLDivElement>();
+  const evaluatingRef = React.useRef(false);
+
+  const evaluate = React.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const children = Array.from(container.children) as HTMLElement[];
+    if (children.length < 2) {
+      return; // single item or no items, no need for fanciness
+    }
+
+    const tagsEls = children.slice(0, -1);
+    const moreEl = children.pop()!;
+
+    const apply = () => {
+      const moreLabel = moreLabelFn(count);
+      if (moreLabelRef.current && moreLabelRef.current.textContent !== moreLabel) {
+        moreLabelRef.current.textContent = moreLabel;
+      }
+      moreEl.style.display = moreLabel !== null ? 'initial' : 'none';
+      tagsEls.forEach((c, idx) => (c.style.display = idx < count ? 'initial' : 'none'));
+    };
+
+    evaluatingRef.current = true;
+
+    let count = 0;
+    apply();
+
+    while (true) {
+      if (container.scrollHeight > container.offsetHeight && count > 0) {
+        count--;
+        apply();
+        break;
+      } else if (count < tagsEls.length) {
+        count++;
+        apply();
+      } else {
+        break;
+      }
+    }
+
+    evaluatingRef.current = false;
+  }, [moreLabelFn, moreLabelRef, containerRef]);
+
+  useResizeObserver(containerRef, () => {
+    if (!evaluatingRef.current) {
+      evaluate();
+    }
+  });
+
+  React.useEffect(() => {
+    window.requestAnimationFrame(evaluate);
+  }, [evaluate]);
+
+  return {containerRef, moreLabelRef};
 }
 
 export const AssetKeyTagCollection = React.memo((props: AssetKeyTagCollectionProps) => {
-  const {assetKeys, useTags, dialogTitle = 'Assets in run'} = props;
+  const {assetKeys, useTags, maxRows, dialogTitle = 'Assets in run'} = props;
   const {setShowMore, dialog} = useShowMoreDialog(dialogTitle, assetKeys, renderItemAssetKey);
 
+  const count = assetKeys?.length ?? 0;
+  const rendered = maxRows ? 10 : count === 1 ? 1 : 0;
+  const moreLabelFn = React.useCallback(
+    (displayed: number) =>
+      displayed === 0
+        ? `${numberFormatter.format(count)} assets`
+        : count - displayed > 0
+          ? `${numberFormatter.format(count - displayed)} more`
+          : null,
+    [count],
+  );
+
+  const {containerRef, moreLabelRef} = useAdjustChildVisibilityToFill(moreLabelFn);
+
   if (!assetKeys || !assetKeys.length) {
     return null;
   }
 
-  if (assetKeys.length === 1) {
-    // Outer span ensures the popover target is in the right place if the
-    // parent is a flexbox.
-    const assetKey = assetKeys[0]!;
-    return (
-      <TagActionsPopover
-        childrenMiddleTruncate
-        data={{key: '', value: ''}}
-        actions={[
-          {
-            label: 'View asset',
-            to: assetDetailsPathForKey(assetKey),
-          },
-          {
-            label: 'View lineage',
-            to: assetDetailsPathForKey(assetKey, {
-              view: 'lineage',
-              lineageScope: 'downstream',
-            }),
-          },
-        ]}
-      >
-        {useTags ? (
-          <Tag intent="none" interactive icon="asset">
-            <MiddleTruncate text={displayNameForAssetKey(assetKey)} />
-          </Tag>
-        ) : (
-          <Link to={assetDetailsPathForKey(assetKey)}>
-            <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
-              <Icon color={Colors.accentGray()} name="asset" size={16} />
-              <MiddleTruncate text={displayNameForAssetKey(assetKey)} />
-            </Box>
-          </Link>
-        )}
-      </TagActionsPopover>
-    );
-  }
-
   return (
-    <span style={useTags ? {} : {marginBottom: -4}}>
-      <TagActionsPopover
-        data={{key: '', value: ''}}
-        actions={[
-          {
-            label: 'View list',
-            onClick: () => setShowMore(true),
-          },
-          {
-            label: 'View lineage',
-            to: globalAssetGraphPathForAssetsAndDescendants(assetKeys),
-          },
-        ]}
-      >
-        {useTags ? (
-          <Tag intent="none" icon="asset">
-            {numberFormatter.format(assetKeys.length)} assets
-          </Tag>
-        ) : (
-          <ButtonLink onClick={() => setShowMore(true)} underline="hover">
-            <Box flex={{direction: 'row', gap: 8, alignItems: 'center', display: 'inline-flex'}}>
-              <Icon color={Colors.accentGray()} name="asset" size={16} />
-              {`${numberFormatter.format(assetKeys.length)} assets`}
-            </Box>
-          </ButtonLink>
-        )}
-      </TagActionsPopover>
-      {dialog}
-    </span>
+    <Box
+      ref={maxRows ? containerRef : null}
+      flex={{gap: 4, alignItems: 'end', wrap: 'wrap'}}
+      style={{
+        minWidth: 0,
+        maxWidth: '100%',
+        maxHeight: maxRows ? maxRows * 30 : undefined,
+        overflow: 'hidden',
+      }}
+    >
+      {assetKeys.slice(0, rendered).map((assetKey) => (
+        // Outer span ensures the popover target is in the right place if the
+        // parent is a flexbox.
+        <TagActionsPopover
+          key={tokenForAssetKey(assetKey)}
+          childrenMiddleTruncate
+          data={{key: '', value: ''}}
+          actions={[
+            {
+              label: 'View asset',
+              to: assetDetailsPathForKey(assetKey),
+            },
+            {
+              label: 'View lineage',
+              to: assetDetailsPathForKey(assetKey, {
+                view: 'lineage',
+                lineageScope: 'downstream',
+              }),
+            },
+          ]}
+        >
+          {useTags ? (
+            <Tag intent="none" interactive icon="asset">
+              <MiddleTruncate text={displayNameForAssetKey(assetKey)} />
+            </Tag>
+          ) : (
+            <Link to={assetDetailsPathForKey(assetKey)}>
+              <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+                <Icon color={Colors.accentGray()} name="asset" size={16} />
+                <MiddleTruncate text={displayNameForAssetKey(assetKey)} />
+              </Box>
+            </Link>
+          )}
+        </TagActionsPopover>
+      ))}
+      {rendered !== 1 && (
+        <span style={useTags ? {} : {marginBottom: -4}}>
+          <TagActionsPopover
+            data={{key: '', value: ''}}
+            actions={[
+              {
+                label: 'View list',
+                onClick: () => setShowMore(true),
+              },
+              {
+                label: 'View lineage',
+                to: globalAssetGraphPathForAssetsAndDescendants(assetKeys),
+              },
+            ]}
+          >
+            {useTags ? (
+              <Tag intent="none" icon="asset">
+                <span ref={moreLabelRef}>{moreLabelFn(0)}</span>
+              </Tag>
+            ) : (
+              <ButtonLink onClick={() => setShowMore(true)} underline="hover">
+                <Box
+                  flex={{direction: 'row', gap: 8, alignItems: 'center', display: 'inline-flex'}}
+                >
+                  <Icon color={Colors.accentGray()} name="asset" size={16} />
+                  <span ref={moreLabelRef}>{moreLabelFn(0)}</span>
+                </Box>
+              </ButtonLink>
+            )}
+          </TagActionsPopover>
+          {dialog}
+        </span>
+      )}
+    </Box>
   );
 });
 
@@ -159,67 +258,92 @@ interface AssetCheckTagCollectionProps {
   assetChecks: Check[] | null;
   dialogTitle?: string;
   useTags?: boolean;
+  maxRows?: number;
 }
 
 export const AssetCheckTagCollection = React.memo((props: AssetCheckTagCollectionProps) => {
-  const {assetChecks, useTags, dialogTitle = 'Asset checks in run'} = props;
+  const {assetChecks, maxRows, useTags, dialogTitle = 'Asset checks in run'} = props;
   const {setShowMore, dialog} = useShowMoreDialog(dialogTitle, assetChecks, renderItemAssetCheck);
 
+  const count = assetChecks?.length ?? 0;
+  const rendered = maxRows ? 10 : count === 1 ? 1 : 0;
+  const moreLabelFn = React.useCallback(
+    (displayed: number) =>
+      displayed === 0
+        ? `${numberFormatter.format(count)} checks`
+        : count - displayed > 0
+          ? `${numberFormatter.format(count - displayed)} more`
+          : null,
+    [count],
+  );
+
+  const {containerRef, moreLabelRef} = useAdjustChildVisibilityToFill(moreLabelFn);
+
   if (!assetChecks || !assetChecks.length) {
     return null;
   }
 
-  if (assetChecks.length === 1) {
-    // Outer span ensures the popover target is in the right place if the
-    // parent is a flexbox.
-    const check = assetChecks[0]!;
-    return (
-      <TagActionsPopover
-        data={{key: '', value: ''}}
-        actions={[{label: 'View asset check', to: assetDetailsPathForAssetCheck(check)}]}
-        childrenMiddleTruncate
-      >
-        {useTags ? (
-          <Tag intent="none" interactive icon="asset_check">
-            <MiddleTruncate text={labelForAssetCheck(check)} />
-          </Tag>
-        ) : (
-          <Link to={assetDetailsPathForAssetCheck(check)}>
-            <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
-              <Icon color={Colors.accentGray()} name="asset_check" size={16} />
-              <MiddleTruncate text={labelForAssetCheck(check)} />
-            </Box>
-          </Link>
-        )}
-      </TagActionsPopover>
-    );
-  }
-
   return (
-    <>
-      <TagActionsPopover
-        data={{key: '', value: ''}}
-        actions={[
-          {
-            label: 'View list',
-            onClick: () => setShowMore(true),
-          },
-        ]}
-      >
-        {useTags ? (
-          <Tag intent="none" icon="asset_check">
-            {numberFormatter.format(assetChecks.length)} asset checks
-          </Tag>
-        ) : (
-          <ButtonLink onClick={() => setShowMore(true)} underline="hover">
-            <Box flex={{direction: 'row', gap: 8, alignItems: 'center', display: 'inline-flex'}}>
-              <Icon color={Colors.accentGray()} name="asset_check" size={16} />
-              {`${numberFormatter.format(assetChecks.length)} asset checks`}
-            </Box>
-          </ButtonLink>
-        )}
-      </TagActionsPopover>
-      {dialog}
-    </>
+    <Box
+      ref={maxRows ? containerRef : null}
+      flex={{gap: 4, alignItems: 'end', wrap: 'wrap'}}
+      style={{
+        minWidth: 0,
+        maxWidth: '100%',
+        maxHeight: maxRows ? maxRows * 30 : undefined,
+        overflow: 'hidden',
+      }}
+    >
+      {assetChecks.slice(0, rendered).map((check) => (
+        <TagActionsPopover
+          key={`${check.name}-${tokenForAssetKey(check.assetKey)}`}
+          data={{key: '', value: ''}}
+          actions={[{label: 'View asset check', to: assetDetailsPathForAssetCheck(check)}]}
+          childrenMiddleTruncate
+        >
+          {useTags ? (
+            <Tag intent="none" interactive icon="asset_check">
+              <MiddleTruncate text={labelForAssetCheck(check)} />
+            </Tag>
+          ) : (
+            <Link to={assetDetailsPathForAssetCheck(check)}>
+              <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+                <Icon color={Colors.accentGray()} name="asset_check" size={16} />
+                <MiddleTruncate text={labelForAssetCheck(check)} />
+              </Box>
+            </Link>
+          )}
+        </TagActionsPopover>
+      ))}
+      {rendered !== 1 && (
+        <span style={useTags ? {} : {marginBottom: -4}}>
+          <TagActionsPopover
+            data={{key: '', value: ''}}
+            actions={[
+              {
+                label: 'View list',
+                onClick: () => setShowMore(true),
+              },
+            ]}
+          >
+            {useTags ? (
+              <Tag intent="none" icon="asset_check">
+                <span ref={moreLabelRef}>{moreLabelFn(0)}</span>
+              </Tag>
+            ) : (
+              <ButtonLink onClick={() => setShowMore(true)} underline="hover">
+                <Box
+                  flex={{direction: 'row', gap: 8, alignItems: 'center', display: 'inline-flex'}}
+                >
+                  <Icon color={Colors.accentGray()} name="asset_check" size={16} />
+                  <span ref={moreLabelRef}>{moreLabelFn(0)}</span>
+                </Box>
+              </ButtonLink>
+            )}
+          </TagActionsPopover>
+          {dialog}
+        </span>
+      )}
+    </Box>
   );
 });
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunAssetTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunAssetTags.tsx
index 561412a038af1..867d462940da6 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunAssetTags.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunAssetTags.tsx
@@ -1,3 +1,5 @@
+import {useMemo} from 'react';
+
 import {AssetKeyTagCollection} from './AssetTagCollections';
 import {assetKeysForRun} from './RunUtils';
 import {gql, useQuery} from '../apollo-client';
@@ -13,13 +15,15 @@ export const RunAssetTags = (props: {run: RunFragment}) => {
     skip,
     fetchPolicy: 'no-cache',
   });
-  const {data, loading} = queryResult;
 
-  if (loading || !data || data.pipelineRunOrError.__typename !== 'Run') {
-    return null;
-  }
+  const assetKeys = useMemo(() => {
+    const {data, loading} = queryResult;
+    if (loading || !data || data.pipelineRunOrError.__typename !== 'Run') {
+      return null;
+    }
 
-  const assetKeys = skip ? assetKeysForRun(run) : data.pipelineRunOrError.assets.map((a) => a.key);
+    return skip ? assetKeysForRun(run) : data.pipelineRunOrError.assets.map((a) => a.key);
+  }, [queryResult, run, skip]);
 
   return <AssetKeyTagCollection useTags assetKeys={assetKeys} />;
 };
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx
index a79f148bffad4..80c9c836f95c6 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunRow.tsx
@@ -85,7 +85,7 @@ export const RunRow = ({
       </td>
       <td style={{position: 'relative'}}>
         <Box flex={{direction: 'column', gap: 5}}>
-          <RunTargetLink isJob={isJob} run={run} repoAddress={repoAddressGuess} />
+          <RunTargetLink isJob={isJob} run={run} repoAddress={repoAddressGuess} useTags={false} />
           <Box
             flex={{direction: 'row', alignItems: 'center', wrap: 'wrap'}}
             style={{gap: '4px 8px'}}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx
index 995a47fb85283..537f3a46efa6f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTargetLink.tsx
@@ -5,13 +5,14 @@ import {AssetCheckTagCollection, AssetKeyTagCollection} from './AssetTagCollecti
 import {assetKeysForRun} from './RunUtils';
 import {RunTableRunFragment} from './types/RunTableRunFragment.types';
 import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
-import {PipelineReference} from '../pipelines/PipelineReference';
+import {PipelineReference, PipelineTag} from '../pipelines/PipelineReference';
 import {RepoAddress} from '../workspace/types';
 
 export const RunTargetLink = ({
   run,
   isJob,
   repoAddress,
+  useTags,
 }: {
   isJob: boolean;
   run: Pick<
@@ -19,12 +20,35 @@ export const RunTargetLink = ({
     'pipelineName' | 'assetSelection' | 'stepKeysToExecute' | 'assetCheckSelection'
   >;
   repoAddress: RepoAddress | null;
+  useTags: boolean;
 }) => {
-  return isHiddenAssetGroupJob(run.pipelineName) ? (
-    <Box flex={{gap: 16, alignItems: 'end', wrap: 'wrap'}} style={{minWidth: 0, maxWidth: '100%'}}>
-      <AssetKeyTagCollection assetKeys={assetKeysForRun(run)} />
-      <AssetCheckTagCollection assetChecks={run.assetCheckSelection} />
-    </Box>
+  const assetKeys = React.useMemo(() => {
+    return isHiddenAssetGroupJob(run.pipelineName) ? assetKeysForRun(run) : null;
+  }, [run]);
+
+  if (assetKeys) {
+    return (
+      <Box flex={{direction: 'column', gap: 4}}>
+        <AssetKeyTagCollection
+          assetKeys={assetKeys}
+          useTags={useTags}
+          maxRows={run.assetCheckSelection?.length ? 1 : 2}
+        />
+        <AssetCheckTagCollection
+          assetChecks={run.assetCheckSelection}
+          useTags={useTags}
+          maxRows={assetKeys?.length ? 1 : 2}
+        />
+      </Box>
+    );
+  }
+  return useTags ? (
+    <PipelineTag
+      isJob={isJob}
+      showIcon
+      pipelineName={run.pipelineName}
+      pipelineHrefContext={repoAddress || 'repo-unknown'}
+    />
   ) : (
     <PipelineReference
       isJob={isJob}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx
index df63cce066f39..a7b8240bf468a 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx
@@ -140,19 +140,16 @@ export const RunsFeedRow = ({
         </Box>
       </RowCell>
       <RowCell style={{flexDirection: 'row', alignItems: 'flex-start'}}>
-        <Tag>
-          <Box flex={{direction: 'row', gap: 4}}>
-            {entry.__typename === 'Run' ? (
-              <RunTargetLink
-                isJob={true}
-                run={{...entry, pipelineName: entry.jobName!, stepKeysToExecute: []}}
-                repoAddress={repoAddress}
-              />
-            ) : (
-              <BackfillTarget backfill={entry} repoAddress={null} />
-            )}
-          </Box>
-        </Tag>
+        {entry.__typename === 'Run' ? (
+          <RunTargetLink
+            isJob={true}
+            run={{...entry, pipelineName: entry.jobName!, stepKeysToExecute: []}}
+            repoAddress={repoAddress}
+            useTags={true}
+          />
+        ) : (
+          <BackfillTarget backfill={entry} repoAddress={null} useTags={true} />
+        )}
       </RowCell>
       <RowCell>
         <CreatedByTagCell tags={entry.tags || []} onAddTag={onAddTag} repoAddress={repoAddress} />
@@ -199,7 +196,7 @@ export const RunsFeedRow = ({
 };
 
 const TEMPLATE_COLUMNS =
-  '60px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 140px 170px 120px 132px';
+  '60px minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) 140px 170px 120px 132px';
 
 export const RunsFeedTableHeader = ({checkbox}: {checkbox: React.ReactNode}) => {
   return (
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/AssetKeyTagCollection.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/AssetKeyTagCollection.stories.tsx
new file mode 100644
index 0000000000000..3e4784e58e43d
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/AssetKeyTagCollection.stories.tsx
@@ -0,0 +1,107 @@
+import {Box} from '@dagster-io/ui-components';
+import {Meta} from '@storybook/react';
+import faker from 'faker';
+import {MemoryRouter} from 'react-router-dom';
+import styled from 'styled-components';
+
+import {AssetKeyTagCollection} from '../AssetTagCollections';
+
+const makeKeys = (count: number) => {
+  return Array(count)
+    .fill(null)
+    .map((_) => ({path: [faker.random.word()]}));
+};
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'AssetKeyTagCollection',
+  component: AssetKeyTagCollection,
+} as Meta;
+
+export const Scenarios = () => {
+  const single = makeKeys(1);
+  const two = makeKeys(2);
+  const many = makeKeys(20);
+
+  const singleSuperLong = [{path: [faker.lorem.word(10).repeat(10)]}];
+  const manySuperLong = Array(20)
+    .fill(null)
+    .map((_) => ({path: [faker.lorem.word(10).repeat(10)]}));
+
+  return (
+    <MemoryRouter>
+      <Row>
+        <div>old style</div>
+        <div>tag style</div>
+        <div>tag + maxrows</div>
+      </Row>
+      <Row>
+        <div>
+          <AssetKeyTagCollection assetKeys={single} />
+        </div>
+        <div>
+          <AssetKeyTagCollection assetKeys={single} useTags />
+        </div>
+        <div style={{maxHeight: 60}}>
+          <AssetKeyTagCollection assetKeys={single} useTags maxRows={2} />
+        </div>
+      </Row>
+      <Row>
+        <div style={{overflow: 'hidden', maxWidth: 400}}>
+          <AssetKeyTagCollection assetKeys={singleSuperLong} />
+        </div>
+        <div style={{minWidth: 0}}>
+          <AssetKeyTagCollection assetKeys={singleSuperLong} useTags />
+        </div>
+        <div style={{minWidth: 0, maxHeight: 60}}>
+          <AssetKeyTagCollection assetKeys={singleSuperLong} useTags maxRows={2} />
+        </div>
+      </Row>
+      <Row>
+        <div>
+          <AssetKeyTagCollection assetKeys={two} />
+        </div>
+        <div>
+          <AssetKeyTagCollection assetKeys={two} useTags />
+        </div>
+        <div style={{maxHeight: 60}}>
+          <AssetKeyTagCollection assetKeys={two} useTags maxRows={2} />
+        </div>
+      </Row>
+      <Row>
+        <div>
+          <AssetKeyTagCollection assetKeys={many} />
+        </div>
+        <div>
+          <AssetKeyTagCollection assetKeys={many} useTags />
+        </div>
+        <div style={{maxHeight: 60}}>
+          <AssetKeyTagCollection assetKeys={many} useTags maxRows={2} />
+        </div>
+      </Row>
+      <Row>
+        <div>
+          <AssetKeyTagCollection assetKeys={manySuperLong} />
+        </div>
+        <div>
+          <AssetKeyTagCollection assetKeys={manySuperLong} useTags />
+        </div>
+        <div style={{maxHeight: 60}}>
+          <AssetKeyTagCollection assetKeys={manySuperLong} useTags maxRows={2} />
+        </div>
+      </Row>
+    </MemoryRouter>
+  );
+};
+
+const Row = styled(Box)`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  min-height: 30px;
+  margin-bottom: 24px;
+  height: 100%;
+
+  & > div {
+    min-width: 0;
+  }
+`;