From d2a5b9b28920e7a7d1931aebcaa8818620159d83 Mon Sep 17 00:00:00 2001
From: Andre Pereira <adrapereira@gmail.com>
Date: Tue, 17 Jan 2023 11:42:56 +0000
Subject: [PATCH] Tempo: Trace View - Search bar to absolute position instead
 of sticky (#61324)

* Trace View: Search bar to absolute position instead of sticky

* Fix search bar position to the inside of the trace view panel
---
 .../TracePageHeader/TracePageSearchBar.tsx    |  5 ++-
 .../explore/TraceView/TraceViewContainer.tsx  | 35 +++++++++----------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
index 84a4a3c6c82..b8fa71464eb 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
@@ -29,12 +29,11 @@ export const getStyles = (theme: GrafanaTheme2) => {
     TracePageSearchBar: css`
       label: TracePageSearchBar;
       float: right;
-      position: sticky;
-      top: 8px;
+      position: absolute;
+      top: 0;
       right: 0;
       z-index: ${theme.zIndex.navbarFixed};
       background: ${theme.colors.background.primary};
-      margin-top: 8px;
       margin-bottom: -48px;
       padding: 8px;
       margin-right: 2px;
diff --git a/public/app/features/explore/TraceView/TraceViewContainer.tsx b/public/app/features/explore/TraceView/TraceViewContainer.tsx
index 6bdadacea77..e5bbdce5b2e 100644
--- a/public/app/features/explore/TraceView/TraceViewContainer.tsx
+++ b/public/app/features/explore/TraceView/TraceViewContainer.tsx
@@ -35,7 +35,7 @@ export function TraceViewContainer(props: Props) {
   }
 
   return (
-    <>
+    <Collapse label="Trace View" isOpen>
       <TracePageSearchBar
         navigable={true}
         searchValue={search}
@@ -46,23 +46,20 @@ export function TraceViewContainer(props: Props) {
         focusedSpanIdForSearch={focusedSpanIdForSearch}
         setFocusedSpanIdForSearch={setFocusedSpanIdForSearch}
       />
-
-      <Collapse label="Trace View" isOpen>
-        <TraceView
-          exploreId={exploreId}
-          dataFrames={dataFrames}
-          splitOpenFn={splitOpenFn}
-          scrollElement={scrollElement}
-          traceProp={traceProp}
-          spanFindMatches={spanFindMatches}
-          search={search}
-          focusedSpanIdForSearch={focusedSpanIdForSearch}
-          queryResponse={queryResponse}
-          datasource={datasource}
-          topOfViewRef={topOfViewRef}
-          topOfViewRefType={TopOfViewRefType.Explore}
-        />
-      </Collapse>
-    </>
+      <TraceView
+        exploreId={exploreId}
+        dataFrames={dataFrames}
+        splitOpenFn={splitOpenFn}
+        scrollElement={scrollElement}
+        traceProp={traceProp}
+        spanFindMatches={spanFindMatches}
+        search={search}
+        focusedSpanIdForSearch={focusedSpanIdForSearch}
+        queryResponse={queryResponse}
+        datasource={datasource}
+        topOfViewRef={topOfViewRef}
+        topOfViewRefType={TopOfViewRefType.Explore}
+      />
+    </Collapse>
   );
 }