fix(seer): line up embed header tags with the View link baseline

static/app/components/seer/markdown/embeds/components/errorsQueryBlock.tsx

@@ -1,5 +1,3 @@
-import {Tag} from '@sentry/scraps/badge';
-
 import {QueryEmbedCard} from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedCard';
 import {
   QueryEmbedChart,
@@ -15,6 +13,7 @@ import {
   eventRowKey,
   QueryEmbedTable,
 } from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedTable';
+import {SeerEmbedTag} from 'sentry/components/seer/markdown/embeds/components/seerEmbedTag';
 import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {aggregateOutputType} from 'sentry/utils/discover/fields';
@@ -77,7 +76,7 @@ export default function ErrorsQueryBlock({data}: {data: ErrorsQueryData}) {
 
   return (
     <QueryEmbedCard
-      badge={<Tag variant="muted">{isAggregate ? t('Aggregate') : t('Events')}</Tag>}
+      badge={<SeerEmbedTag>{isAggregate ? t('Aggregate') : t('Events')}</SeerEmbedTag>}
       href={getErrorsQueryHref(eventView, organization)}
       icon={IconSearch}
       linkLabel={t('View Errors')}

static/app/components/seer/markdown/embeds/components/logsQueryBlock.tsx

@@ -1,5 +1,3 @@
-import {Tag} from '@sentry/scraps/badge';
-
 import {QueryEmbedCard} from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedCard';
 import {
   chartUnitFromTimeSeries,
@@ -14,6 +12,7 @@ import {
   QueryEmbedTable,
 } from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedTable';
 import {toPageFilters} from 'sentry/components/seer/markdown/embeds/components/queryEmbedParams';
+import {SeerEmbedTag} from 'sentry/components/seer/markdown/embeds/components/seerEmbedTag';
 import {IconList} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Sort} from 'sentry/utils/discover/fields';
@@ -90,9 +89,9 @@ export default function LogsQueryBlock({data}: {data: LogsQueryData}) {
   return (
     <QueryEmbedCard
       badge={
-        <Tag variant="muted">
+        <SeerEmbedTag>
           {data.mode === 'aggregate' ? t('Aggregate') : t('Logs')}
-        </Tag>
+        </SeerEmbedTag>
       }
       href={getLogsQueryHref(data, organization)}
       icon={IconList}

static/app/components/seer/markdown/embeds/components/metricsQueryBlock.tsx

@@ -1,5 +1,3 @@
-import {Tag} from '@sentry/scraps/badge';
-
 import {QueryEmbedCard} from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedCard';
 import {
   chartUnitFromTimeSeries,
@@ -14,6 +12,7 @@ import {
   QueryEmbedTable,
 } from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedTable';
 import {toPageFilters} from 'sentry/components/seer/markdown/embeds/components/queryEmbedParams';
+import {SeerEmbedTag} from 'sentry/components/seer/markdown/embeds/components/seerEmbedTag';
 import {IconGraph} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
@@ -87,9 +86,9 @@ export default function MetricsQueryBlock({data}: {data: MetricsQueryData}) {
   return (
     <QueryEmbedCard
       badge={
-        <Tag variant="muted">
+        <SeerEmbedTag>
           {data.mode === 'aggregate' ? t('Aggregate') : t('Samples')}
-        </Tag>
+        </SeerEmbedTag>
       }
       href={getMetricsQueryHref(data, organization)}
       icon={IconGraph}

static/app/components/seer/markdown/embeds/components/monitor/monitorBlock.tsx

@@ -2,7 +2,6 @@ import type {ComponentType} from 'react';
 import * as Sentry from '@sentry/react';
 import {useQuery} from '@tanstack/react-query';
 
-import {Tag} from '@sentry/scraps/badge';
 import {Flex} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
@@ -13,6 +12,7 @@ import {MetricMonitor} from 'sentry/components/seer/markdown/embeds/components/m
 import {MobileBuildMonitor} from 'sentry/components/seer/markdown/embeds/components/monitor/monitorTypes/mobileBuild';
 import {UptimeMonitor} from 'sentry/components/seer/markdown/embeds/components/monitor/monitorTypes/uptime';
 import {SeerEmbedBlock} from 'sentry/components/seer/markdown/embeds/components/seerEmbedBlock';
+import {SeerEmbedTag} from 'sentry/components/seer/markdown/embeds/components/seerEmbedTag';
 import type {EmbedOutput} from 'sentry/components/seer/markdown/embeds/utils';
 import {
   IconClock,
@@ -130,8 +130,8 @@ export default function MonitorBlock({id, name}: EmbedOutput<'monitor'>) {
       badge={
         detector ? (
           <Flex gap="xs">
-            <Tag variant="muted">{getDetectorTypeLabel(detector.type)}</Tag>
-            {detector.enabled ? null : <Tag variant="muted">{t('Disabled')}</Tag>}
+            <SeerEmbedTag>{getDetectorTypeLabel(detector.type)}</SeerEmbedTag>
+            {detector.enabled ? null : <SeerEmbedTag>{t('Disabled')}</SeerEmbedTag>}
           </Flex>
         ) : null
       }

static/app/components/seer/markdown/embeds/components/savedQueryBlock.tsx

@@ -4,6 +4,7 @@ import {Text} from '@sentry/scraps/text';
 
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {QueryEmbedCard} from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedCard';
+import {SeerEmbedTag} from 'sentry/components/seer/markdown/embeds/components/seerEmbedTag';
 import {TimeSince} from 'sentry/components/timeSince';
 import {IconStar} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
@@ -45,7 +46,7 @@ export default function SavedQueryBlock({data}: {data: SavedQueryData}) {
     <QueryEmbedCard
       badge={
         // Trust the dataset the API reports over the one the tag claimed.
-        <Tag variant="muted">{getSavedQueryDatasetLabel(savedQuery.dataset)}</Tag>
+        <SeerEmbedTag>{getSavedQueryDatasetLabel(savedQuery.dataset)}</SeerEmbedTag>
       }
       href={getSavedQueryTraceItemUrl({savedQuery, organization})}
       icon={IconStar}

static/app/components/seer/markdown/embeds/components/seerEmbedTag.tsx

@@ -0,0 +1,36 @@
+import type {ReactNode} from 'react';
+
+import {Tag} from '@sentry/scraps/badge';
+import {Text} from '@sentry/scraps/text';
+
+import type {TagVariant} from 'sentry/utils/theme';
+
+/**
+ * A `Tag` for `SeerEmbedBlock`'s badge slot, whose label sits on the same
+ * baseline as the header's title and its "View ..." link.
+ *
+ * The `Text` wrapper is load-bearing rather than decorative. `Tag` renders a
+ * bare label whose box keeps the font's half-leading, and the pill centers that
+ * box; the title and link beside it come from `Heading` and `Link`, which set
+ * `text-box-trim: trim-both` so their boxes hug the glyphs instead. Centering
+ * the two kinds of box against each other left the tag's label ~1.4px high.
+ * `Text` gives the label the same trimmed box as its neighbours.
+ *
+ * `variant="inherit"` keeps the pill's own text color -- `Text` would otherwise
+ * paint the label with the primary content color and drop the tag's.
+ */
+export function SeerEmbedTag({
+  children,
+  variant = 'muted',
+}: {
+  children: ReactNode;
+  variant?: TagVariant;
+}) {
+  return (
+    <Tag variant={variant}>
+      <Text ellipsis variant="inherit">
+        {children}
+      </Text>
+    </Tag>
+  );
+}

static/app/components/seer/markdown/embeds/components/spansQueryBlock.tsx

@@ -1,5 +1,3 @@
-import {Tag} from '@sentry/scraps/badge';
-
 import {QueryEmbedCard} from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedCard';
 import {
   QueryEmbedChart,
@@ -15,6 +13,7 @@ import {
   eventRowKey,
   QueryEmbedTable,
 } from 'sentry/components/seer/markdown/embeds/components/queryEmbed/queryEmbedTable';
+import {SeerEmbedTag} from 'sentry/components/seer/markdown/embeds/components/seerEmbedTag';
 import {IconSpan} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {aggregateOutputType} from 'sentry/utils/discover/fields';
@@ -74,9 +73,9 @@ export default function SpansQueryBlock({data}: {data: SpansQueryData}) {
   return (
     <QueryEmbedCard
       badge={
-        <Tag variant="muted">
+        <SeerEmbedTag>
           {data.mode === 'aggregate' ? t('Aggregate') : t('Spans')}
-        </Tag>
+        </SeerEmbedTag>
       }
       href={getSpansQueryHref(data, organization)}
       icon={IconSpan}