Explore: UI improvements to trace view (#34276)

* Various ui fixes

* Remove unused classes

* Fix opening of collapsible

* Fix pointer issue

* Update e2e test

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

@@ -100,7 +100,7 @@ const getStyles = createStyle((theme: Theme) => {
       font-size: 1.7em;
       line-height: 1em;
       margin: 0 0 0 0.5em;
-      padding: 0.5em 0;
+      padding-bottom: 0.5em;
     `,
     TracePageHeaderTitleCollapsible: css`
       label: TracePageHeaderTitleCollapsible;

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx

@@ -42,7 +42,6 @@ const getStyles = createStyle((theme: Theme) => {
   return {
     nameWrapper: css`
       label: nameWrapper;
-      background: ${autoColor(theme, '#f8f8f8')};
       line-height: 27px;
       overflow: hidden;
       display: flex;

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx

@@ -58,7 +58,7 @@ const getStyles = createStyle((theme: Theme) => {
       }
     `,
     infoWrapper: css`
-      background: ${autoColor(theme, '#f5f5f5')};
+      label: infoWrapper;
       border: 1px solid ${autoColor(theme, '#d3d3d3')};
       border-top: 3px solid;
       padding: 0.75rem;
@@ -123,7 +123,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
     const styles = getStyles(theme);
     return (
       <TimelineRow>
-        <TimelineRow.Cell width={columnDivision}>
+        <TimelineRow.Cell width={columnDivision} style={{ overflow: 'hidden' }}>
           <SpanTreeOffset
             span={span}
             showChildrenIcon={false}

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx

@@ -34,7 +34,6 @@ export const getStyles = createStyle((theme: Theme) => {
     SpanTreeOffsetParent: css`
       label: SpanTreeOffsetParent;
       &:hover {
-        background-color: ${autoColor(theme, '#e8e8e8')};
         cursor: pointer;
       }
     `,