From 41340fad3e188ad082c07477db499f9c2a1cb2ff Mon Sep 17 00:00:00 2001
From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com>
Date: Fri, 17 Jun 2022 08:45:30 +0100
Subject: [PATCH] Traces: Add horizontal scroll (#50278)

* Add horizontal scroll

* Update horizontal scroll

* Update scroll area

* Removed unecessary reorder

* Formatting
---
 .../src/TraceTimelineViewer/SpanBarRow.tsx    | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
index 481d34cdfc8..7ace6c3f33d 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
@@ -213,11 +213,17 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       cursor: pointer;
       flex: 1 1 auto;
       outline: none;
-      overflow: hidden;
+      overflow-y: hidden;
+      overflow-x: auto;
+      margin-right: 8px;
       padding-left: 4px;
       padding-right: 0.25em;
       position: relative;
-      text-overflow: ellipsis;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
       &::before {
         content: ' ';
         position: absolute;
@@ -227,17 +233,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
         border-left: 4px solid;
         border-left-color: inherit;
       }
-
-      /* This is so the hit area of the span-name extends the rest of the width of the span-name column */
-      &::after {
-        background: transparent;
-        bottom: 0;
-        content: ' ';
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 1000px;
-      }
       &:focus {
         text-decoration: none;
       }