fix(replays): Disable position:sticky on performance span waterfall (#35086)

### Description

```
The Network tab (no longer Performance) includes an existing waterfall component that shows span data.
The header of this component is position: sticky because it made sense for the original use-case of that component.
On our details page we have our own sticky content. So that header should not be sticky on our page.
```

Since is not our component, had to write 'scss' syntax to get rid of the `position:sticky` on the deeply nested component.

Fixes: #34877

static/app/components/events/interfaces/spans/header.tsx

@@ -729,7 +729,7 @@ const DurationGuideBox = styled('div')<{alignLeft: boolean}>`
   }};
 `;
 
-const HeaderContainer = styled('div')`
+export const HeaderContainer = styled('div')`
   width: 100%;
   position: sticky;
   left: 0;

static/app/views/replays/details.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import DetailedError from 'sentry/components/errors/detailedError';
 import NotFound from 'sentry/components/errors/notFound';
+import {HeaderContainer} from 'sentry/components/events/interfaces/spans/header';
 import * as Layout from 'sentry/components/layouts/thirds';
 import ReplayTimeline from 'sentry/components/replays/breadcrumbs/replayTimeline';
 import {Provider as ReplayContextProvider} from 'sentry/components/replays/replayContext';
@@ -94,9 +95,9 @@ function ReplayDetails() {
             <FocusTabs />
           </StickyMain>
 
-          <Layout.Main fullWidth>
+          <StyledLayoutMain fullWidth>
             <FocusArea replay={replay} />
-          </Layout.Main>
+          </StyledLayoutMain>
         </Layout.Body>
       </DetailLayout>
     </ReplayContextProvider>
@@ -115,4 +116,10 @@ const StickyMain = styled(Layout.Main)`
   background: ${p => p.theme.background};
 `;
 
+const StyledLayoutMain = styled(Layout.Main)`
+  ${HeaderContainer} {
+    position: relative;
+  }
+`;
+
 export default ReplayDetails;