feat(new-trace): Span drawer db query styling and buttons in vertical layout. (#69335)

<img width="1277" alt="Screenshot 2024-04-19 at 2 47 44 PM"
src="https://github.com/getsentry/sentry/assets/60121741/8330ec00-5e01-4d13-a2ad-5a083f6a29a4">

<img width="1283" alt="Screenshot 2024-04-19 at 2 47 26 PM"
src="https://github.com/getsentry/sentry/assets/60121741/d02db505-246c-42c7-9d7a-e485078a1b0b">

---------

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

Author: 2 people

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

@@ -41,7 +41,8 @@ import {GeneralSpanDetailsValue} from 'sentry/views/performance/traceDetails/new
 import {spanDetailsRouteWithQuery} from 'sentry/views/performance/transactionSummary/transactionSpans/spanDetails/utils';
 import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
 import {getPerformanceDuration} from 'sentry/views/performance/utils/getPerformanceDuration';
-import {SpanDescription} from 'sentry/views/starfish/components/spanDescription';
+import {Frame, SpanDescription} from 'sentry/views/starfish/components/spanDescription';
+import {FrameContainer} from 'sentry/views/starfish/components/stackTraceMiniFrame';
 import {ModuleName} from 'sentry/views/starfish/types';
 import {resolveSpanModule} from 'sentry/views/starfish/utils/resolveSpanModule';
 
@@ -455,11 +456,13 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
                 extra={renderSpanDetailActions()}
               >
                 {resolvedModule === ModuleName.DB ? (
-                  <SpanDescription
-                    groupId={span.sentry_tags?.group ?? ''}
-                    op={span.op ?? ''}
-                    preliminaryDescription={span.description}
-                  />
+                  <SpanDescriptionWrapper>
+                    <SpanDescription
+                      groupId={span.sentry_tags?.group ?? ''}
+                      op={span.op ?? ''}
+                      preliminaryDescription={span.description}
+                    />
+                  </SpanDescriptionWrapper>
                 ) : (
                   span.description
                 )}
@@ -735,13 +738,13 @@ const Flex = styled('div')`
   display: flex;
   align-items: center;
 `;
-const ButtonGroup = styled('div')`
+export const ButtonGroup = styled('div')`
   display: flex;
   flex-direction: column;
   gap: ${space(0.5)};
 `;
 
-const ValueRow = styled('div')`
+export const ValueRow = styled('div')`
   display: grid;
   grid-template-columns: auto min-content;
   gap: ${space(1)};
@@ -756,12 +759,27 @@ const StyledPre = styled('pre')`
   background-color: transparent !important;
 `;
 
-const ButtonContainer = styled('div')`
+export const ButtonContainer = styled('div')`
   padding: 8px 10px;
 `;
 
 const StyledQuestionTooltip = styled(QuestionTooltip)`
   margin-left: ${space(0.5)};
 `;
 
+const SpanDescriptionWrapper = styled('div')`
+  ${Frame} {
+    border: none;
+  }
+
+  ${FrameContainer} {
+    padding: ${space(2)} 0 0 0;
+    margin-top: ${space(2)};
+  }
+
+  pre {
+    padding: 0 !important;
+  }
+`;
+
 export default NewTraceDetailsSpanDetail;

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

@@ -5,6 +5,11 @@ import pick from 'lodash/pick';
 
 import type {Tag} from 'sentry/actionCreators/events';
 import {Button} from 'sentry/components/button';
+import {
+  ButtonContainer,
+  ButtonGroup,
+  ValueRow,
+} from 'sentry/components/events/interfaces/spans/newTraceDetailsSpanDetails';
 import {IconChevron, IconPanel, IconPin} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -754,6 +759,24 @@ const Content = styled('div')<{layout: 'drawer bottom' | 'drawer left' | 'drawer
         tr {
           display: grid;
         }
+
+        ${ValueRow}{
+          grid-template-columns: none;
+          grid-template-rows: min-content min-content;
+          gap: 0;
+
+          pre {
+            padding-bottom: 0 !important;
+          }
+
+          ${ButtonContainer} {
+            padding-top: 0;
+
+           ${ButtonGroup} {
+              flex-direction: row;
+            }
+          }
+        }
       `}
 `;