fix(breadcrumbs): Use subgrid to align log levels

getsentry · Aug 14, 2024 · 2727b01 · 2727b01
1 parent 26cc15f
commit 2727b01
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 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,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: '';