Tempo: Add ellipsis to span name in the span details view (#96719)

2024-11-21 13:57:42 +00:00
parent 1061e4712f
commit d567be2f10
1 changed files with 9 additions and 1 deletions
@@ -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>