From 3335db990fbeb25bf8c2f05267478c23ad61930d Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Tue, 28 Feb 2023 15:12:52 -0800
Subject: [PATCH] fix(alerts): Center table items on alert history page

The owner avatar was added at another size and items were not center aligned
---
 .../app/views/alerts/list/incidents/index.tsx |  4 +++
 .../app/views/alerts/list/incidents/row.tsx   | 25 +++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/static/app/views/alerts/list/incidents/index.tsx b/static/app/views/alerts/list/incidents/index.tsx
index b2da4295187910..f2d71a9a0ab125 100644
--- a/static/app/views/alerts/list/incidents/index.tsx
+++ b/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)`
diff --git a/static/app/views/alerts/list/incidents/row.tsx b/static/app/views/alerts/list/incidents/row.tsx
index 1d60d49fc256ab..20cf92d2eb4af5 100644
--- a/static/app/views/alerts/list/incidents/row.tsx
+++ b/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')`