chore(trace-view-vitals): refactor pill styling (#96477)

- Refactor code for pills in trace view

**Before:**
<img width="942" height="182" alt="Screenshot 2025-07-25 at 1 46 53 PM"
src="https://github.com/user-attachments/assets/4cc4c556-3c1f-4c87-b4f4-cc37844b06db"
/>
<img width="508" height="143" alt="Screenshot 2025-07-25 at 1 49 43 PM"
src="https://github.com/user-attachments/assets/1e59bc89-87a4-449a-a24e-e7180b31b480"
/>

**After:**
<img width="946" height="175" alt="Screenshot 2025-07-25 at 1 46 39 PM"
src="https://github.com/user-attachments/assets/a0a23946-e392-4b62-bddc-d98272811bd2"
/>
<img width="507" height="142" alt="Screenshot 2025-07-25 at 1 49 22 PM"
src="https://github.com/user-attachments/assets/108c13b7-650f-42a1-9280-ad5701b84748"
/>

Author: doralchan

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

@@ -140,74 +140,56 @@ function VitalPill({vital, vitalDetails}: VitalPillProps) {
   const acronym = vitalDetails.acronym ?? vitalDetails.name;
   return (
     <VitalPillContainer>
-      <Tooltip title={toolTipTitle}>
-        <VitalPillName status={status}>{`${acronym}`}</VitalPillName>
-      </Tooltip>
+      <VitalPillName status={status}>
+        <Tooltip title={toolTipTitle}>{`${acronym}`}</Tooltip>
+      </VitalPillName>
       <VitalPillValue>{formattedMeterValueText}</VitalPillValue>
     </VitalPillContainer>
   );
 }
 
+const VitalMetersContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${space(1)};
+`;
+
 const VitalPillContainer = styled('div')`
   display: flex;
-  flex-direction: row;
-  max-width: 'auto';
-  height: 28px;
 `;
 
 const VitalPillName = styled('div')<{status: PerformanceScore}>`
   display: flex;
   align-items: center;
-  position: relative;
-  width: max-content;
-
-  height: 100%;
-  padding: 0 ${space(1)};
+  justify-content: center;
   border: solid 1px
     ${p =>
       p.status === 'none'
         ? p.theme.border
         : makePerformanceScoreColors(p.theme)[p.status].border};
   border-radius: ${p => p.theme.borderRadius} 0 0 ${p => p.theme.borderRadius};
-
   background-color: ${p => makePerformanceScoreColors(p.theme)[p.status].light};
   color: ${p => makePerformanceScoreColors(p.theme)[p.status].normal};
-
   font-size: ${p => p.theme.fontSize.sm};
   font-weight: ${p => p.theme.fontWeight.bold};
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: ${space(0.25)};
   text-decoration-thickness: 1px;
-
-  cursor: pointer;
+  padding: 0 ${space(1)};
 `;
 
 const VitalPillValue = styled('div')`
   display: flex;
-  flex: 1;
   align-items: center;
-  justify-content: flex-end;
-
-  height: 100%;
-  padding: 0 ${space(0.5)};
+  justify-content: center;
   border: 1px solid ${p => p.theme.border};
   border-left: none;
   border-radius: 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0;
-
   background: ${p => p.theme.background};
   color: ${p => p.theme.textColor};
-
   font-size: ${p => p.theme.fontSize.lg};
-`;
-
-const VitalMetersContainer = styled('div')`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: ${space(1)};
-  width: 'auto';
+  padding: 0 ${space(1)};
 `;
 
 const SecondaryVitalsCount = styled('span')`

static/app/views/performance/newTraceDetails/traceHeader/meta.tsx

@@ -29,7 +29,7 @@ function MetaSection({headingText, bodyText, rightAlignBody}: MetaDataProps) {
   return (
     <HeaderInfo>
       <StyledSectionHeading>{headingText}</StyledSectionHeading>
-      <SectionBody rightAlign={rightAlignBody}>{bodyText}</SectionBody>
+      <SectionBody alignment={rightAlignBody}>{bodyText}</SectionBody>
     </HeaderInfo>
   );
 }
@@ -43,9 +43,9 @@ const StyledSectionHeading = styled(SectionHeading)`
   margin: 0;
 `;
 
-const SectionBody = styled('div')<{rightAlign?: boolean}>`
+const SectionBody = styled('div')<{alignment?: boolean}>`
   font-size: ${p => p.theme.fontSize.xl};
-  text-align: ${p => (p.rightAlign ? 'right' : 'left')};
+  text-align: ${p => (p.alignment ? 'right' : 'left')};
   padding: ${space(0.5)} 0;
   max-height: 32px;
 `;

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

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/core/layout';
 import {TabList, Tabs} from 'sentry/components/core/tabs';
-import {space} from 'sentry/styles/space';
 import type {TraceRootEventQueryResults} from 'sentry/views/performance/newTraceDetails/traceApi/useTraceRootEvent';
 import {TraceContextVitals} from 'sentry/views/performance/newTraceDetails/traceContextVitals';
 import {TraceHeaderComponents} from 'sentry/views/performance/newTraceDetails/traceHeader/styles';
@@ -92,11 +91,11 @@ export function TraceTabsAndVitals({
   return (
     <Flex ref={setRef} justify="between">
       <Tabs value={currentTab} onChange={onTabChange}>
-        <StyledTabsList hideBorder variant="floating">
+        <TabList hideBorder variant="floating">
           {tabOptions.map(tab => (
             <TabList.Item key={tab.slug}>{tab.label}</TabList.Item>
           ))}
-        </StyledTabsList>
+        </TabList>
       </Tabs>
       <TraceContextVitals
         rootEventResults={rootEventResults}
@@ -110,9 +109,3 @@ export function TraceTabsAndVitals({
 const StyledPlaceholder = styled(TraceHeaderComponents.StyledPlaceholder)`
   background-color: ${p => p.theme.purple100};
 `;
-
-const StyledTabsList = styled(TabList)`
-  display: flex;
-  align-items: center;
-  gap: ${space(1)};
-`;