fix(breadcrumbs): Use subgrid to align log levels (#76148)

getsentry · Aug 14, 2024 · 9a99b0f · 9a99b0f
1 parent fad1a67
commit 9a99b0f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git 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
@@ -62,16 +62,13 @@ 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;
-  grid-column-gap: ${space(1)};
-  margin: ${space(1)} 0;
-  &:first-child {
-    margin-top: 0;
-  }
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+  grid-row-gap: ${space(0.5)};
+
   &:last-child {
-    margin-bottom: 0;
     /* Show/hide connecting line from the last element of the timeline */
     background: ${p => (p.showLastLine ? 'transparent' : p.theme.background)};
   }
@@ -136,6 +133,10 @@ export const Data = styled('div')`
 
 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: '';