feat(breadcrumbs): Put formatted breadcrumb messages in scrollable containers (#46981)

Because these messages have already gone through a formatter, wrapping
will mess up the formatting and make the result less readable.

static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/default.tsx

@@ -1,6 +1,9 @@
+import styled from '@emotion/styled';
+
 import {AnnotatedText} from 'sentry/components/events/meta/annotatedText';
 import Highlight from 'sentry/components/highlight';
 import Link from 'sentry/components/links/link';
+import {space} from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
 import {BreadcrumbTypeDefault, BreadcrumbTypeNavigation} from 'sentry/types/breadcrumbs';
 import {Event} from 'sentry/types/event';
@@ -82,5 +85,18 @@ const FormatMessage = withProjects(function FormatMessageInner({
     return <Link to={getTransactionDetailsUrl(orgSlug, eventSlug)}>{content}</Link>;
   }
 
-  return content;
+  switch (breadcrumb.messageFormat) {
+    case 'sql':
+      return <FormattedCode>{content}</FormattedCode>;
+    default:
+      return content;
+  }
 });
+
+const FormattedCode = styled('div')`
+  padding: ${space(1)};
+  background: ${p => p.theme.backgroundSecondary};
+  border-radius: ${p => p.theme.borderRadius};
+  overflow-x: auto;
+  white-space: pre;
+`;

static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/summary.tsx

@@ -51,8 +51,6 @@ const Wrapper = styled('div')`
   word-break: break-all;
   font-size: ${p => p.theme.fontSizeSmall};
   font-family: ${p => p.theme.text.familyMono};
-  display: grid;
-  gap: ${space(0.5)};
   overflow: hidden;
 `;
 
@@ -73,10 +71,13 @@ const ContextDataWrapper = styled('div')`
 `;
 
 const StyledCode = styled('code')`
+  display: block;
   font-size: inherit;
   white-space: pre-wrap;
   background: none;
   padding: 0;
+  margin-bottom: ${space(0.5)};
+
   > * {
     vertical-align: middle;
   }

static/app/types/breadcrumbs.tsx

@@ -35,6 +35,8 @@ interface BreadcrumbTypeBase {
   category?: string | null;
   event_id?: string | null;
   message?: string;
+  messageFormat?: 'sql';
+  messageRaw?: string;
   timestamp?: string;
 }