fix(alerts): Center table items on alert history page (#45226)

Author: scttcper

static/app/views/alerts/list/incidents/index.tsx

@@ -315,6 +315,10 @@ function IncidentsListContainer(props: Props) {
 
 const StyledPanelTable = styled(PanelTable)`
   font-size: ${p => p.theme.fontSizeMedium};
+
+  & > div {
+    padding: ${space(1.5)} ${space(2)};
+  }
 `;
 
 const StyledAlert = styled(Alert)`

static/app/views/alerts/list/incidents/row.tsx

@@ -48,9 +48,11 @@ function AlertListRow({incident, projectsLoaded, projects, organization}: Props)
 
   return (
     <ErrorBoundary>
-      <Title data-test-id="alert-title">
-        <Link to={alertLink}>{incident.title}</Link>
-      </Title>
+      <FlexCenter>
+        <Title data-test-id="alert-title">
+          <Link to={alertLink}>{incident.title}</Link>
+        </Title>
+      </FlexCenter>
 
       <NoWrapNumeric>
         {getDynamicText({
@@ -66,13 +68,15 @@ function AlertListRow({incident, projectsLoaded, projects, organization}: Props)
         )}
       </NoWrapNumeric>
 
-      <ProjectBadge avatarSize={18} project={!projectsLoaded ? {slug} : project} />
+      <FlexCenter>
+        <ProjectBadge avatarSize={18} project={!projectsLoaded ? {slug} : project} />
+      </FlexCenter>
       <NoWrapNumeric>#{incident.id}</NoWrapNumeric>
 
       <FlexCenter>
         {teamActor ? (
           <Fragment>
-            <StyledActorAvatar actor={teamActor} size={24} hasTooltip={false} />{' '}
+            <StyledActorAvatar actor={teamActor} size={18} hasTooltip={false} />{' '}
             <TeamWrapper>{teamActor.name}</TeamWrapper>
           </Fragment>
         ) : (
@@ -88,11 +92,6 @@ const Title = styled('div')`
   min-width: 130px;
 `;
 
-const NoWrapNumeric = styled('div')`
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-`;
-
 const ProjectBadge = styled(IdBadge)`
   flex-shrink: 0;
 `;
@@ -101,6 +100,12 @@ const FlexCenter = styled('div')`
   ${p => p.theme.overflowEllipsis}
   display: flex;
   align-items: center;
+  line-height: 1.6;
+`;
+
+const NoWrapNumeric = styled(FlexCenter)`
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 `;
 
 const TeamWrapper = styled('span')`