fix(trace-view): Trace headers should not wrap (#30446)

The trace view headers currently wrap around on certain viewport sizes. This
ensures we use all the space available and stops the line wrapping.

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

@@ -38,11 +38,11 @@ export const TraceViewHeaderContainer = styled(SecondaryHeader)`
 export const TraceDetailHeader = styled('div')`
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: ${space(2)};
+  grid-gap: ${space(3)};
   margin-bottom: ${space(2)};
 
   @media (min-width: ${p => p.theme.breakpoints[1]}) {
-    grid-template-columns: minmax(250px, 1fr) minmax(160px, 1fr) 6fr;
+    grid-template-columns: max-content max-content;
     grid-row-gap: 0;
   }
 `;

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

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {SectionHeading} from 'sentry/components/charts/styles';
 import FeatureBadge from 'sentry/components/featureBadge';
 import QuestionTooltip from 'sentry/components/questionTooltip';
+import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 
 type MetaDataProps = {
@@ -51,6 +52,7 @@ const SectionBody = styled('div')`
   font-size: ${p => p.theme.fontSizeExtraLarge};
   padding: ${space(0.5)} 0;
   max-height: 32px;
+  ${overflowEllipsis};
 `;
 
 const StyledFeatureBadge = styled(FeatureBadge)`