fix(replays): Fix trace view sizing and scrolling (#38577)

**1. Replay Details Trace view is now flush with the top of the focus
area section:**

| |  |
| ------------- | ------------- |
| Before | ![Screen Shot 2022-09-08 at 9 55 06
AM](https://user-images.githubusercontent.com/187460/189189834-7bea0987-40a4-4e58-81d7-6cea29e08e52.png)
|
| After | ![Screen Shot 2022-09-08 at 10 40 12
AM](https://user-images.githubusercontent.com/187460/189189886-a250f2cb-50c3-48c0-8ddd-11f88f8e8f3d.png)
|


**2. The panel extends to the bottom of the window now:**
![Screen Shot 2022-09-08 at 10 38 20
AM](https://user-images.githubusercontent.com/187460/189190071-b468e524-3873-455d-989b-f51c5facea2b.png)



**3. The header thing is sticky, so you can scroll sideways when the
trace is long and you're scrolled down:**
![Screen Shot 2022-09-08 at 10 38 11
AM](https://user-images.githubusercontent.com/187460/189190378-340cf53b-a734-4dd3-bd64-5839dba546fb.png)



Test Plan:

There are three existing callsites for `<TraceView>` to check and make
sure the trace viewer looks the same as before (height is fine on traces
with many/few rows & margin-top is good)

1.
[static/app/components/events/interfaces/spans/index.tsx](https://github.com/getsentry/sentry/blob/master/static/app/components/events/interfaces/spans/index.tsx#L160-L163)
- example url
https://dev.getsentry.net:7999/organizations/sentry/performance/sentry:a0784bbfdd93471086adcb0f4c846508/?project=1&query=&statsPeriod=24h&transaction=%2Fapi%2F0%2Forganizations%2F%7Borganization_slug%7D%2Fissues%2F#span-bf8678ec89716a1c
2. [static/app/views/performance/traceDetails/content.tsx

](https://github.com/getsentry/sentry/blob/master/static/app/views/performance/traceDetails/content.tsx#L303-L312)
- example url:
https://dev.getsentry.net:7999/organizations/sentry/performance/trace/ff15c90baa20406b92009d2e164738eb/?pageEnd=2022-09-09T09%3A46%3A03.923&pageStart=2022-09-08T09%3A45%3A22.518
3.
[static/app/components/events/interfaces/performance/index.tsx](https://github.com/getsentry/sentry/blob/master/static/app/components/events/interfaces/performance/index.tsx#L62-L66)
   - tested by @0Calories, the screen shot looks like normal. Spacing on top and the first row look fine.

static/app/views/performance/traceDetails/content.tsx

@@ -1,5 +1,6 @@
 import {Component, createRef, Fragment} from 'react';
 import {RouteComponentProps} from 'react-router';
+import styled from '@emotion/styled';
 
 import Alert from 'sentry/components/alert';
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
@@ -11,6 +12,7 @@ import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import TimeSince from 'sentry/components/timeSince';
 import {t, tct, tn} from 'sentry/locale';
+import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {defined} from 'sentry/utils';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
@@ -300,16 +302,18 @@ class TraceDetailsContent extends Component<Props, State> {
         {this.renderTraceWarnings()}
         {this.renderTraceHeader(traceInfo)}
         {this.renderSearchBar()}
-        <TraceView
-          filteredTransactionIds={this.state.filteredTransactionIds}
-          traceInfo={traceInfo}
-          location={location}
-          organization={organization}
-          traceEventView={traceEventView}
-          traceSlug={traceSlug}
-          traces={traces}
-          meta={meta}
-        />
+        <Margin>
+          <TraceView
+            filteredTransactionIds={this.state.filteredTransactionIds}
+            traceInfo={traceInfo}
+            location={location}
+            organization={organization}
+            traceEventView={traceEventView}
+            traceSlug={traceSlug}
+            traces={traces}
+            meta={meta}
+          />
+        </Margin>
       </Fragment>
     );
   }
@@ -356,4 +360,8 @@ class TraceDetailsContent extends Component<Props, State> {
   }
 }
 
+const Margin = styled('div')`
+  margin-top: ${space(2)};
+`;
+
 export default TraceDetailsContent;

static/app/views/performance/traceDetails/styles.tsx

@@ -29,10 +29,11 @@ export const TraceSearchBar = styled(SearchBar)`
 `;
 
 export const TraceViewHeaderContainer = styled(SecondaryHeader)`
-  position: static;
-  top: auto;
   border-top: none;
   border-bottom: 1px solid ${p => p.theme.border};
+  position: sticky;
+  top: 0;
+  z-index: 1;
 `;
 
 export const TraceDetailHeader = styled('div')`
@@ -48,7 +49,7 @@ export const TraceDetailHeader = styled('div')`
 `;
 
 export const TraceDetailBody = styled('div')`
-  margin-top: ${space(2)};
+  height: 100%;
 `;
 
 export const TraceViewContainer = styled('div')`
@@ -58,7 +59,8 @@ export const TraceViewContainer = styled('div')`
 `;
 
 export const TracePanel = styled(Panel)`
-  overflow: hidden;
+  height: 100%;
+  overflow: auto;
 `;
 
 export const ProjectBadgeContainer = styled('span')`

tests/acceptance/test_performance_trace_detail.py

@@ -194,5 +194,7 @@ class PerformanceTraceDetailTest(AcceptanceTestCase, SnubaTestCase):
         with self.feature(FEATURE_NAMES):
             self.browser.get(self.path)
             self.browser.wait_until_not('[data-test-id="loading-indicator"]')
-            self.browser.elements('[data-test-id="transaction-row-title"]')[1].click()
+            row_title = self.browser.elements('[data-test-id="transaction-row-title"]')[1]
+            # HACK: Use JavaScript to execute click to avoid click intercepted issues
+            self.browser.driver.execute_script("arguments[0].click()", row_title)
             self.browser.snapshot("performance trace view - with data")