chore(web-vitals): minor cleanup flyout layout (#95596)

- Removed custom stuff
- Reduced vertical space

**Before & After:**
<img width="1491" height="958" alt="Screenshot 2025-07-15 at 12 35
25 PM"
src="https://github.com/user-attachments/assets/69296be4-30f6-40e1-bb6b-ba49506443e0"
/>

Author: doralchan

static/app/views/insights/browser/webVitals/components/webVitalDescription.tsx

@@ -1,4 +1,3 @@
-import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import ExternalLink from 'sentry/components/links/externalLink';
@@ -8,17 +7,9 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {WebVital} from 'sentry/utils/fields';
 import {Browser} from 'sentry/utils/performance/vitals/constants';
-import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
-import {Dot} from 'sentry/views/insights/browser/webVitals/components/webVitalMeters';
+import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/components/performanceBadge';
 import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
-import {
-  makePerformanceScoreColors,
-  type PerformanceScore,
-} from 'sentry/views/insights/browser/webVitals/utils/performanceScoreColors';
-import {
-  scoreToStatus,
-  STATUS_TEXT,
-} from 'sentry/views/insights/browser/webVitals/utils/scoreToStatus';
+import {scoreToStatus} from 'sentry/views/insights/browser/webVitals/utils/scoreToStatus';
 import {vitalSupportedBrowsers} from 'sentry/views/performance/vitalDetail/utils';
 
 type Props = {
@@ -53,7 +44,7 @@ export const VITAL_DESCRIPTIONS: Partial<
         openInNewTab
         href="https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/"
       >
-        How can I fix my FCP?
+        How do I fix my FCP?
       </ExternalLink>
     ),
   },
@@ -69,7 +60,7 @@ export const VITAL_DESCRIPTIONS: Partial<
         openInNewTab
         href="https://blog.sentry.io/from-lcp-to-cls-improve-your-core-web-vitals-with-image-loading-best/"
       >
-        How can I fix my CLS?
+        How do I fix my CLS score?
       </ExternalLink>
     ),
   },
@@ -85,7 +76,7 @@ export const VITAL_DESCRIPTIONS: Partial<
         openInNewTab
         href="https://blog.sentry.io/from-lcp-to-cls-improve-your-core-web-vitals-with-image-loading-best/"
       >
-        How can I fix my LCP?
+        How do I fix my LCP score?
       </ExternalLink>
     ),
   },
@@ -101,7 +92,7 @@ export const VITAL_DESCRIPTIONS: Partial<
         openInNewTab
         href="https://blog.sentry.io/how-i-fixed-my-brutal-ttfb/"
       >
-        How can I fix my TTFB?
+        How do I fix my TTFB score?
       </ExternalLink>
     ),
   },
@@ -114,34 +105,23 @@ export const VITAL_DESCRIPTIONS: Partial<
     ),
     link: (
       <ExternalLink openInNewTab href="https://blog.sentry.io/what-is-inp/">
-        How can I fix my INP?
+        How do I fix my INP score?
       </ExternalLink>
     ),
   },
 };
 
 export function WebVitalDetailHeader({score, value, webVital}: Props) {
-  const theme = useTheme();
-  const colors = theme.chart.getColorPalette(4);
-  const dotColor = colors[ORDER.indexOf(webVital)]!;
   const status = score === undefined ? undefined : scoreToStatus(score);
 
   return (
-    <Header>
-      <span>
-        <WebVitalName>{`${WEB_VITAL_FULL_NAME_MAP[webVital]} (P75)`}</WebVitalName>
-        <Value>
-          <Dot color={dotColor} />
-          {value ?? ' \u2014 '}
-        </Value>
-      </span>
-      {status && score && (
-        <ScoreBadge status={status}>
-          <StatusText>{STATUS_TEXT[status]}</StatusText>
-          <StatusScore>{score}</StatusScore>
-        </ScoreBadge>
-      )}
-    </Header>
+    <div>
+      <WebVitalName>{`${WEB_VITAL_FULL_NAME_MAP[webVital]} (P75)`}</WebVitalName>
+      <WebVitalScore>
+        <Value>{value ?? ' \u2014 '}</Value>
+        {status && score && <PerformanceBadge score={score} />}
+      </WebVitalScore>
+    </div>
   );
 }
 
@@ -154,17 +134,10 @@ export function WebVitalDescription({score, value, webVital}: Props) {
       <WebVitalDetailHeader score={score} value={value} webVital={webVital} />
       <DescriptionWrapper>
         {longDescription}
-        {link}
+        {tct(` [webVital] is available for the following browsers:`, {
+          webVital: webVital.toUpperCase(),
+        })}
       </DescriptionWrapper>
-
-      <p>
-        <b>
-          {tct(
-            `At the moment, there is support for [webVital] in the following browsers:`,
-            {webVital: webVital.toUpperCase()}
-          )}
-        </b>
-      </p>
       <SupportedBrowsers>
         {Object.values(Browser).map(browser => (
           <BrowserItem key={browser}>
@@ -179,14 +152,19 @@ export function WebVitalDescription({score, value, webVital}: Props) {
           </BrowserItem>
         ))}
       </SupportedBrowsers>
+      <ReferenceLink>{link}</ReferenceLink>
     </div>
   );
 }
 
 const SupportedBrowsers = styled('div')`
   display: inline-flex;
   gap: ${space(2)};
-  margin-bottom: ${space(3)};
+  margin-bottom: ${space(2)};
+`;
+
+const ReferenceLink = styled('div')`
+  margin-bottom: ${space(2)};
 `;
 
 const BrowserItem = styled('div')`
@@ -195,52 +173,25 @@ const BrowserItem = styled('div')`
   gap: ${space(1)};
 `;
 
-const Header = styled('span')`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: ${space(3)};
-`;
-
 const DescriptionWrapper = styled('div')`
   display: flex;
   flex-direction: column;
-  margin-bottom: ${space(2)};
+  margin-bottom: ${space(1)};
 `;
 
 const Value = styled('h2')`
-  display: flex;
-  align-items: center;
-  font-weight: ${p => p.theme.fontWeight.normal};
-  margin-bottom: ${space(1)};
+  margin-bottom: 0;
 `;
 
-const WebVitalName = styled('h4')`
-  margin-bottom: ${space(1)};
-  max-width: 400px;
+const WebVitalName = styled('h6')`
+  margin-bottom: 0;
   ${p => p.theme.overflowEllipsis}
 `;
 
-const ScoreBadge = styled('div')<{status: PerformanceScore}>`
+const WebVitalScore = styled('div')`
   display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  color: ${p => makePerformanceScoreColors(p.theme)[p.status].normal};
-  background-color: ${p => makePerformanceScoreColors(p.theme)[p.status].light};
-  border: solid 1px ${p => makePerformanceScoreColors(p.theme)[p.status].light};
-  padding: ${space(0.5)};
-  text-align: center;
-  height: 60px;
-  width: 60px;
-  border-radius: 60px;
-`;
-
-const StatusText = styled('span')`
-  padding-top: ${space(0.5)};
-  font-size: ${p => p.theme.fontSize.sm};
-`;
-
-const StatusScore = styled('span')`
+  align-items: anchor-center;
   font-weight: ${p => p.theme.fontWeight.bold};
-  font-size: ${p => p.theme.fontSize.lg};
+  margin-bottom: ${space(1)};
+  gap: ${space(1)};
 `;