feat(new-trace): Vertical layout for left/right docking and minor fixes. (#67245)

Fixes: 
![Screenshot 2024-03-19 at 1 36 32
PM](https://github.com/getsentry/sentry/assets/60121741/77bf5508-200e-4775-818f-cc4f594791d0)
and Query highlighting overflow

Displays content stack for vertical dock state:
![Screenshot 2024-03-19 at 1 41 39
PM](https://github.com/getsentry/sentry/assets/60121741/1a88f0fa-e9b0-4b08-89d2-4bcb968d392f)

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

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

@@ -604,6 +604,10 @@ export const SpanDetails = styled('div')`
   table.table.key-value td.key {
     max-width: 280px;
   }
+
+  pre {
+    overflow: hidden !important;
+  }
 `;
 
 const ValueTd = styled('td')`

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -41,6 +41,7 @@ const Actions = styled(FlexBox)`
 
 const Title = styled(FlexBox)`
   gap: ${space(1)};
+  flex: none;
 `;
 
 const Type = styled('div')`

static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx

@@ -195,7 +195,7 @@ function TraceDrawer(props: TraceDrawerProps) {
           </TabLayoutControlItem>
         </TabLayoutControlsContainer>
       </TabsContainer>
-      <Content>
+      <Content layout={props.layout}>
         {props.activeTab === 'trace' ? (
           <TraceLevelDetails
             tree={props.trace}
@@ -280,6 +280,7 @@ const TabLayoutControlsContainer = styled('ul')`
   padding-left: 0;
   margin-left: auto;
   margin-right: ${space(1.5)};
+  flex: none;
 
   button {
     padding: ${space(0.5)};
@@ -319,10 +320,30 @@ const TabButton = styled('button')`
   background: transparent;
 `;
 
-const Content = styled('div')`
+const Content = styled('div')<{layout: 'drawer bottom' | 'drawer left' | 'drawer right'}>`
   overflow: scroll;
   padding: ${space(1)};
   flex: 1;
+
+  td {
+    max-width: 100% !important;
+  }
+
+  ${p =>
+    p.layout !== 'drawer bottom' &&
+    `
+        table {
+          display: flex;
+        }
+
+        tbody {
+          flex: 1;
+        }
+
+        tr {
+          display: grid;
+        }
+      `}
 `;
 
 const DrawerButton = styled(Button)<{active: boolean}>`