fix(codecov): Fix line coverage legend edge cases and coloring (#102742)

Followup to #102450 to fix edge
cases of when pills have long, individual text that doesn't wrap.
<img width="2264" height="792" alt="image"
src="https://github.com/user-attachments/assets/5a2151ec-c752-4e88-9611-9b2a6698535d"
/>


Solution: drop the legend on to its own line below and shrink a little
bit to prevent taking away too much attention away from the pills.

Small screen width with wrapping:
<img width="512" height="385" alt="Screenshot 2025-11-04 at 3 55 08 PM"
src="https://github.com/user-attachments/assets/ca46f2af-9dac-4313-a70e-cbb6280778e1"
/>
Normal case:
<img width="917" height="410" alt="Screenshot 2025-11-04 at 3 55 21 PM"
src="https://github.com/user-attachments/assets/8dd9f47f-33a3-4508-8153-62278d1f883e"
/>

Author: calvin-codecov

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;
-`;

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;
 `;

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 {