diff --git a/static/app/components/events/interfaces/crashContent/exception/content.tsx b/static/app/components/events/interfaces/crashContent/exception/content.tsx
index d3a1d8881de7df..88a53caf1642a6 100644
--- a/static/app/components/events/interfaces/crashContent/exception/content.tsx
+++ b/static/app/components/events/interfaces/crashContent/exception/content.tsx
@@ -2,7 +2,7 @@ import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
-import {Flex} from 'sentry/components/core/layout/flex';
+import {Container} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {StacktraceBanners} from 'sentry/components/events/interfaces/crashContent/exception/banners/stacktraceBanners';
@@ -205,16 +205,15 @@ function InnerContent({
       <ToggleExceptionButton
         {...{hiddenExceptions, toggleRelatedExceptions, values, exception}}
       />
-      {exception.mechanism || hasCoverageData ? (
-        <RowWrapper direction="row" justify="between">
-          {exception.mechanism && (
-            <Mechanism
-              data={exception.mechanism}
-              meta={meta?.[exceptionIdx]?.mechanism}
-            />
-          )}
-          {hasCoverageData ? <LineCoverageLegend /> : null}
-        </RowWrapper>
+      {exception.mechanism ? (
+        <Container paddingTop="xl">
+          <Mechanism data={exception.mechanism} meta={meta?.[exceptionIdx]?.mechanism} />
+        </Container>
+      ) : null}
+      {hasCoverageData ? (
+        <Container paddingTop="md">
+          <LineCoverageLegend />
+        </Container>
       ) : null}
       <RelatedExceptions
         mechanism={exception.mechanism}
@@ -411,7 +410,3 @@ const StyledFoldSection = styled(FoldSection)`
     margin-right: ${p => p.theme.space.xl};
   }
 `;
-
-const RowWrapper = styled(Flex)`
-  margin: ${p => p.theme.space.xl} 0 ${p => p.theme.space.xs} 0;
-`;
diff --git a/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx b/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx
index 66a4a5a65cf26f..7d76dfade8238a 100644
--- a/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx
+++ b/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx
@@ -1,33 +1,38 @@
 import styled from '@emotion/styled';
 
-import {Flex} from 'sentry/components/core/layout/flex';
+import {Container, Flex} from 'sentry/components/core/layout';
+import {Text} from 'sentry/components/core/text/text';
 import {coverageText as COVERAGE_TEXT} from 'sentry/components/events/interfaces/frame/contextLineNumber';
 import {Coverage} from 'sentry/types/integrations';
 
 export function LineCoverageLegend() {
   return (
-    <Flex gap="2xl" align="center" direction="row" paddingBottom="md">
-      <CoveredLine>{COVERAGE_TEXT[Coverage.COVERED]}</CoveredLine>
-      <UncoveredLine>{COVERAGE_TEXT[Coverage.NOT_COVERED]}</UncoveredLine>
-      <PartiallyCoveredLine>{COVERAGE_TEXT[Coverage.PARTIAL]}</PartiallyCoveredLine>
+    <Flex gap="2xl" align="center" direction="row" wrap="wrap">
+      <SolidLegendEntry paddingRight="md" borderRight="success">
+        <Text size="sm" wrap="nowrap">
+          {COVERAGE_TEXT[Coverage.COVERED]}
+        </Text>
+      </SolidLegendEntry>
+      <SolidLegendEntry paddingRight="md" borderRight="danger">
+        <Text size="sm" wrap="nowrap">
+          {COVERAGE_TEXT[Coverage.NOT_COVERED]}
+        </Text>
+      </SolidLegendEntry>
+      <DashedLegendEntry paddingRight="md" borderRight="warning">
+        <Text size="sm" wrap="nowrap">
+          {COVERAGE_TEXT[Coverage.PARTIAL]}
+        </Text>
+      </DashedLegendEntry>
     </Flex>
   );
 }
 
-const CoveredLine = styled('div')`
-  padding-right: ${p => p.theme.space.md};
-  border-right: 3px solid ${p => p.theme.tokens.content.success};
-  white-space: nowrap;
+const SolidLegendEntry = styled(Container)`
+  border-right-width: 3px;
+  border-right-style: solid;
 `;
 
-const UncoveredLine = styled('div')`
-  padding-right: ${p => p.theme.space.md};
-  border-right: 3px solid ${p => p.theme.tokens.content.danger};
-  white-space: nowrap;
-`;
-
-const PartiallyCoveredLine = styled('div')`
-  padding-right: ${p => p.theme.space.md};
-  border-right: 3px dashed ${p => p.theme.tokens.content.warning};
-  white-space: nowrap;
+const DashedLegendEntry = styled(Container)`
+  border-right-width: 3px;
+  border-right-style: dashed;
 `;
diff --git a/static/app/components/events/interfaces/frame/contextLineNumber.tsx b/static/app/components/events/interfaces/frame/contextLineNumber.tsx
index 44d066da4b0e18..f5f49b0420924a 100644
--- a/static/app/components/events/interfaces/frame/contextLineNumber.tsx
+++ b/static/app/components/events/interfaces/frame/contextLineNumber.tsx
@@ -69,17 +69,17 @@ const Wrapper = styled('div')`
 
   &.covered .line-number {
     background: ${p => p.theme.green100};
-    border-right: 3px solid ${p => p.theme.tokens.content.success};
+    border-right: 3px solid ${p => p.theme.tokens.border.success};
   }
 
   &.uncovered .line-number {
     background: ${p => p.theme.red100};
-    border-right: 3px solid ${p => p.theme.tokens.content.danger};
+    border-right: 3px solid ${p => p.theme.tokens.border.danger};
   }
 
   &.partial .line-number {
     background: ${p => p.theme.yellow100};
-    border-right: 3px dashed ${p => p.theme.tokens.content.warning};
+    border-right: 3px dashed ${p => p.theme.tokens.border.warning};
   }
 
   &.active {