From 2727b01b6419adf7cbf34ef9a365ca20525d7506 Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Tue, 13 Aug 2024 17:47:06 -0700
Subject: [PATCH 1/2] fix(breadcrumbs): Use subgrid to align log levels

---
 .../components/events/breadcrumbs/breadcrumbsTimeline.tsx | 1 +
 static/app/components/timeline/index.tsx                  | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx
index b8015564ee6a8a..67fd9e6edbda54 100644
--- a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx
+++ b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx
@@ -144,6 +144,7 @@ const Subtitle = styled('p')`
 
 const Timestamp = styled('div')`
   margin-right: ${space(1)};
+  text-align: right;
   color: ${p => p.theme.subText};
   font-size: ${p => p.theme.fontSizeSmall};
   span {
diff --git a/static/app/components/timeline/index.tsx b/static/app/components/timeline/index.tsx
index 44b57780b2d25d..6b71146c82297c 100644
--- a/static/app/components/timeline/index.tsx
+++ b/static/app/components/timeline/index.tsx
@@ -62,10 +62,12 @@ export const Item = forwardRef(function _Item(
 const Row = styled('div')<{showLastLine?: boolean}>`
   position: relative;
   color: ${p => p.theme.subText};
-  display: grid;
   align-items: start;
-  grid-template: auto auto / 22px 1fr auto;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
   grid-column-gap: ${space(1)};
+
   margin: ${space(1)} 0;
   &:first-child {
     margin-top: 0;
@@ -136,6 +138,8 @@ export const Data = styled('div')`
 
 export const Container = styled('div')`
   position: relative;
+  display: grid;
+  grid-template: auto auto / 22px 1fr auto;
   /* vertical line connecting items */
   &::before {
     content: '';

From 39da9bb783fb76e1d0e8b3587c6c6329e4d0d983 Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Tue, 13 Aug 2024 18:08:02 -0700
Subject: [PATCH 2/2] fiddle with margin

---
 static/app/components/timeline/index.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/static/app/components/timeline/index.tsx b/static/app/components/timeline/index.tsx
index 6b71146c82297c..5cda61692a88ad 100644
--- a/static/app/components/timeline/index.tsx
+++ b/static/app/components/timeline/index.tsx
@@ -66,14 +66,9 @@ const Row = styled('div')<{showLastLine?: boolean}>`
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1/-1;
-  grid-column-gap: ${space(1)};
+  grid-row-gap: ${space(0.5)};
 
-  margin: ${space(1)} 0;
-  &:first-child {
-    margin-top: 0;
-  }
   &:last-child {
-    margin-bottom: 0;
     /* Show/hide connecting line from the last element of the timeline */
     background: ${p => (p.showLastLine ? 'transparent' : p.theme.background)};
   }
@@ -140,6 +135,8 @@ export const Container = styled('div')`
   position: relative;
   display: grid;
   grid-template: auto auto / 22px 1fr auto;
+  grid-row-gap: ${space(1)};
+  grid-column-gap: ${space(1)};
   /* vertical line connecting items */
   &::before {
     content: '';