From d567be2f1018733b60f1c31caed7d6ba91ab530d Mon Sep 17 00:00:00 2001
From: "Marc M." <146180665+grafakus@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:57:42 +0100
Subject: [PATCH] Tempo: Add ellipsis to span name in the span details view
 (#96719)

---
 .../TraceTimelineViewer/SpanDetail/index.tsx           | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
index d472a831470..9d6c42fe92c 100644
--- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
+++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
@@ -65,6 +65,12 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     operationName: css({
       margin: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      flexBasis: '50%',
+      flexGrow: 0,
+      flexShrink: 0,
     }),
     debugInfo: css({
       label: 'debugInfo',
@@ -344,7 +350,9 @@ export default function SpanDetail(props: SpanDetailProps) {
   return (
     <div data-testid="span-detail-component">
       <div className={styles.header}>
-        <h2 className={styles.operationName}>{operationName}</h2>
+        <h2 className={styles.operationName} title={operationName}>
+          {operationName}
+        </h2>
         <div className={styles.listWrapper}>
           <LabeledList className={styles.list} divider={true} items={overviewItems} />
         </div>