Fix: Trace Root transaction name (#612)

<!--
Tick these boxes if they're applicable to your PR.
- Changesets are only required for PRs to Spotlight library packages
(e.g. @spotlightjs/overlay). Not for the website/docs or demo app
contributions.
- Typo correction or small bugfix PRs don't require an issue. If you're
making a bigger change, please open an issue first.
-->

Before opening this PR:

- [x] I added a [Changeset
Entry](https://spotlightjs.com/contribute/changesets/) with `pnpm
changeset:add`
- [x] I referenced issues that this PR addresses

#607 

![image](https://github.com/user-attachments/assets/926e7b60-61b8-491c-8666-e0cbbae3186b)

.changeset/mean-games-fail.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+Added Trace root transaction name in Trace detail header

packages/overlay/src/integrations/sentry/components/explore/traces/TraceDetails/components/TraceDetailHeader.tsx

@@ -1,5 +1,6 @@
 import type { Trace } from '../../../../../types';
 import TraceIcon from '../../TraceIcon';
+import { TraceRootTxnName } from './TraceRootTxnName';
 
 type TraceDetailHeaderProps = {
   trace: Trace;
@@ -9,7 +10,10 @@ export default function TraceDetailHeader({ trace }: TraceDetailHeaderProps) {
   return (
     <div className="border-b-primary-700 bg-primary-950 flex items-center gap-x-2 border-b px-6 py-4">
       <TraceIcon trace={trace} />
-      <h1 className="max-w-full flex-1 truncate text-2xl">{trace.rootTransactionName}</h1>
+      <h1 className="flex w-full flex-1 items-center truncate text-2xl">
+        Trace:&nbsp;&nbsp;
+        <TraceRootTxnName trace={trace} flowing />
+      </h1>
     </div>
   );
 }

packages/overlay/src/integrations/sentry/components/explore/traces/TraceDetails/components/TraceRootTxnName.tsx

@@ -0,0 +1,13 @@
+import type { Trace } from '~/integrations/sentry/types';
+import Tag from '~/ui/Tag';
+
+export function TraceRootTxnName({ trace, flowing = false }: { trace: Trace; flowing?: boolean }) {
+  const method = String(
+    trace.rootTransaction?.contexts?.trace.data?.method || trace.rootTransaction?.request?.method || '',
+  );
+  const name =
+    method && trace.rootTransactionName.startsWith(method)
+      ? trace.rootTransactionName.slice(method.length + 1)
+      : trace.rootTransactionName;
+  return <Tag tagKey={method} value={name} flowing={flowing} />;
+}

packages/overlay/src/integrations/sentry/components/explore/traces/TraceList.tsx

@@ -1,30 +1,18 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Badge from '~/ui/Badge';
-import Tag from '~/ui/Tag';
 import CardList from '../../../../../components/CardList';
 import TimeSince from '../../../../../components/TimeSince';
 import classNames from '../../../../../lib/classNames';
 import { useSpotlightContext } from '../../../../../lib/useSpotlightContext';
 import { useSentryHelpers } from '../../../data/useSentryHelpers';
 import { useSentryTraces } from '../../../data/useSentryTraces';
-import type { Trace } from '../../../types';
 import { getDuration } from '../../../utils/duration';
 import { truncateId } from '../../../utils/text';
 import HiddenItemsButton from '../../HiddenItemsButton';
+import { TraceRootTxnName } from './TraceDetails/components/TraceRootTxnName';
 import TraceIcon from './TraceIcon';
 
-function TransactionName({ trace }: { trace: Trace }) {
-  const method = String(
-    trace.rootTransaction?.contexts?.trace.data?.method || trace.rootTransaction?.request?.method || '',
-  );
-  const name =
-    method && trace.rootTransactionName.startsWith(method)
-      ? trace.rootTransactionName.slice(method.length + 1)
-      : trace.rootTransactionName;
-  return <Tag tagKey={method} value={name} />;
-}
-
 export default function TraceList() {
   const traceList = useSentryTraces();
   const helpers = useSentryHelpers();
@@ -64,7 +52,7 @@ export default function TraceList() {
                   </div>
                   <TimeSince date={trace.start_timestamp} />
                 </div>
-                <TransactionName trace={trace} />
+                <TraceRootTxnName trace={trace} />
                 <div className="flex flex-col truncate font-mono">
                   <div className="text-primary-300 flex space-x-2 text-sm">
                     <div

packages/overlay/src/ui/Tag/Tag.tsx

@@ -1,10 +1,30 @@
-export type TagProps = { tagKey: string; value: string };
+import classNames from '~/lib/classNames';
 
-export default function Tag({ tagKey, value }: TagProps) {
-  return value ? (
-    <div className="border-primary-300 bg-primary-900 divide-x-primary-300 inline-flex divide-x overflow-hidden whitespace-nowrap rounded-full border font-mono text-sm">
-      {tagKey ? <div className="px-2 py-1 font-semibold">{tagKey}</div> : null}
-      <div className="bg-primary-800 rounded-full px-2 py-1">{value}</div>
+export type TagProps = {
+  tagKey?: string;
+  value: string;
+  flowing?: boolean;
+  maxWidth?: string;
+};
+
+export default function Tag({ tagKey, value, flowing = false, maxWidth = '400px' }: TagProps) {
+  if (!value) return null;
+
+  return (
+    <div
+      className={classNames(
+        'border-primary-300 bg-primary-900 divide-x-primary-300 inline-flex divide-x overflow-hidden whitespace-nowrap rounded-full border font-mono text-sm',
+        flowing && 'max-w-full',
+      )}
+    >
+      {tagKey && <div className="px-2 py-1 font-semibold">{tagKey}</div>}
+      <div
+        title={value}
+        className={classNames('bg-primary-800 truncate px-2 py-1', flowing ? 'max-w-full' : 'max-w-none')}
+        style={{ maxWidth: flowing ? '100%' : maxWidth }}
+      >
+        {value}
+      </div>
     </div>
-  ) : null;
+  );
 }