fix(starfish): fixes various ui bugs in endpoint overview and span summary (#50833)

Fix endpoint overview sample events table column widths overflowing
Updates `durationCell` to highlight green when negative and red when
positive
Update span summary page description font and card to look better
Fix undefined dereference in `spanGroupBreakdownContainer`

static/app/views/starfish/components/samplesTable/transactionSamplesTable.tsx

@@ -36,7 +36,7 @@ const COLUMN_ORDER: TableColumnHeader[] = [
   {
     key: 'id',
     name: 'Event ID',
-    width: 140,
+    width: 100,
   },
   {
     key: 'profile_id',
@@ -46,12 +46,12 @@ const COLUMN_ORDER: TableColumnHeader[] = [
   {
     key: SPAN_OP_RELATIVE_BREAKDOWN_FIELD,
     name: 'Operation Duration',
-    width: 200,
+    width: 180,
   },
   {
     key: 'timestamp',
     name: 'Timestamp',
-    width: 300,
+    width: 230,
   },
   {
     key: 'transaction.duration',

static/app/views/starfish/components/tableCells/durationCell.tsx

@@ -15,7 +15,7 @@ export default function DurationCell({milliseconds, delta}: Props) {
     <Container>
       <Duration seconds={milliseconds / 1000} fixedDigits={2} abbreviation />
       {delta ? (
-        <ComparisonLabel value={delta * -1}>
+        <ComparisonLabel value={delta}>
           {delta > 0 ? '+' : ''}
           {formatPercentage(delta)}
         </ComparisonLabel>

static/app/views/starfish/views/spanSummaryPage/index.tsx

@@ -113,11 +113,11 @@ function SpanSummaryPage({params, location}: Props) {
                 <BlockContainer>
                   <Block>
                     <Panel>
-                      <PanelBody>
+                      <DescriptionPanelBody>
                         <DescriptionContainer>
                           <SpanDescription spanMeta={spanMetas?.[0]} />
                         </DescriptionContainer>
-                      </PanelBody>
+                      </DescriptionPanelBody>
                     </Panel>
                   </Block>
 
@@ -238,6 +238,13 @@ export const BlockContainer = styled('div')`
 const DescriptionContainer = styled('div')`
   width: 100%;
   padding: ${space(1)};
+  font-size: 1rem;
+  line-height: 1.2;
+`;
+
+const DescriptionPanelBody = styled(PanelBody)`
+  padding: ${space(2)};
+  height: 208px;
 `;
 
 const BlockWrapper = styled('div')`

static/app/views/starfish/views/webServiceView/spanGroupBreakdownContainer.tsx

@@ -86,7 +86,7 @@ export function SpanGroupBreakdownContainer({transaction, transactionMethod}: Pr
     return <Placeholder height="285px" />;
   }
 
-  const totalValues = cumulativeTime.data[0]['sum(span.duration)']
+  const totalValues = cumulativeTime.data[0]?.['sum(span.duration)']
     ? parseInt(cumulativeTime?.data[0]['sum(span.duration)'] as string, 10)
     : 0;
   const totalSegments =