ref(crons): Switch to subgrid to simplify css (#67268)

Looks the same

static/app/components/events/interfaces/crons/cronTimelineSection.tsx

@@ -105,7 +105,7 @@ export function CronTimelineSection({event, organization, project}: Props) {
           end={end}
           width={timelineWidth}
         />
-        <StyledGridLineOverlay
+        <GridLineOverlay
           showCursor={!isLoading}
           timeWindowConfig={timeWindowConfig}
           start={start}
@@ -145,11 +145,7 @@ const TimelineContainer = styled(Panel)`
 `;
 
 const StyledGridLineTimeLabels = styled(GridLineTimeLabels)`
-  grid-column: 0;
-`;
-
-const StyledGridLineOverlay = styled(GridLineOverlay)`
-  grid-column: 0;
+  border-bottom: 1px solid ${p => p.theme.border};
 `;
 
 const TimelineWidthTracker = styled('div')`

static/app/views/monitors/components/cronDetailsTimeline.tsx

@@ -134,13 +134,15 @@ export function CronDetailsTimeline({monitor, organization}: Props) {
   return (
     <TimelineContainer>
       <TimelineWidthTracker ref={elementRef} />
-      <TimelineTitle>{t('Check-Ins')}</TimelineTitle>
-      <StyledGridLineTimeLabels
-        timeWindowConfig={config}
-        start={start}
-        end={end}
-        width={timelineWidth}
-      />
+      <Header>
+        <TimelineTitle>{t('Check-Ins')}</TimelineTitle>
+        <GridLineTimeLabels
+          timeWindowConfig={config}
+          start={start}
+          end={end}
+          width={timelineWidth}
+        />
+      </Header>
       <StyledGridLineOverlay
         showCursor={!isLoading}
         timeWindowConfig={config}
@@ -168,8 +170,11 @@ const TimelineContainer = styled(Panel)`
   grid-template-columns: 135px 1fr;
 `;
 
-const StyledGridLineTimeLabels = styled(GridLineTimeLabels)`
-  grid-column: 2;
+const Header = styled('div')`
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: subgrid;
+  border-bottom: 1px solid ${p => p.theme.border};
 `;
 
 const StyledGridLineOverlay = styled(GridLineOverlay)`
@@ -185,6 +190,6 @@ const TimelineWidthTracker = styled('div')`
 
 const TimelineTitle = styled(Text)`
   ${p => p.theme.text.cardTitle};
-  border-bottom: 1px solid ${p => p.theme.border};
   padding: ${space(2)};
+  grid-column: 1;
 `;

static/app/views/monitors/components/mockTimelineVisualization.tsx

@@ -136,6 +136,7 @@ const TimelineContainer = styled(Panel)`
 
 const StyledGridLineTimeLabels = styled(GridLineTimeLabels)`
   grid-column: 0;
+  border-bottom: 1px solid ${p => p.theme.border};
 `;
 
 const StyledGridLineOverlay = styled(GridLineOverlay)`

static/app/views/monitors/components/overviewTimeline/gridLines.tsx

@@ -138,7 +138,6 @@ const GridLineContainer = styled('div')`
 const LabelsContainer = styled('div')`
   position: relative;
   align-self: stretch;
-  border-bottom: 1px solid ${p => p.theme.border};
 `;
 
 const Gridline = styled('div')<{left: number}>`

static/app/views/monitors/components/overviewTimeline/index.tsx

@@ -144,18 +144,18 @@ export function OverviewTimeline({monitorList}: Props) {
   return (
     <MonitorListPanel>
       <TimelineWidthTracker ref={elementRef} />
-      <HeaderControls>
-        <ResolutionSelector />
-        <SortSelector />
-      </HeaderControls>
-      <StickyGridLineTimeLabels>
-        <BorderlessGridLineTimeLabels
+      <Header>
+        <HeaderControls>
+          <ResolutionSelector />
+          <SortSelector />
+        </HeaderControls>
+        <GridLineTimeLabels
           timeWindowConfig={timeWindowConfig}
           start={start}
           end={nowRef.current}
           width={timelineWidth}
         />
-      </StickyGridLineTimeLabels>
+      </Header>
       <GridLineOverlay
         stickyCursor
         showCursor={!isLoading}
@@ -190,42 +190,30 @@ const MonitorListPanel = styled(Panel)`
   grid-template-columns: 350px 135px 1fr;
 `;
 
-const HeaderControls = styled(Sticky)`
-  display: flex;
-  gap: ${space(0.5)};
+const Header = styled(Sticky)`
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+
   z-index: 1;
-  padding: ${space(1.5)} ${space(2)};
-  grid-column: 1/3;
   background: ${p => p.theme.background};
   border-top-left-radius: ${p => p.theme.panelBorderRadius};
+  border-top-right-radius: ${p => p.theme.panelBorderRadius};
   box-shadow: 0 1px ${p => p.theme.translucentBorder};
 
   &[data-stuck] {
     border-radius: 0;
     border-left: 1px solid ${p => p.theme.border};
-    margin-left: -1px;
+    border-right: 1px solid ${p => p.theme.border};
+    margin: 0 -1px;
   }
 `;
 
-// We don't need border here because it is already accomplished via box-shadow below
-const BorderlessGridLineTimeLabels = styled(GridLineTimeLabels)`
-  border: none;
-`;
-
-const StickyGridLineTimeLabels = styled(Sticky)`
-  > * {
-    height: 100%;
-  }
-  z-index: 1;
-  background: ${p => p.theme.background};
-  border-top-right-radius: ${p => p.theme.panelBorderRadius};
-  box-shadow: 0 1px ${p => p.theme.translucentBorder};
-
-  &[data-stuck] {
-    border-radius: 0;
-    border-right: 1px solid ${p => p.theme.border};
-    margin-right: -1px;
-  }
+const HeaderControls = styled('div')`
+  grid-column: 1/3;
+  display: flex;
+  gap: ${space(0.5)};
+  padding: ${space(1.5)} ${space(2)};
 `;
 
 const TimelineWidthTracker = styled('div')`

static/app/views/monitors/components/overviewTimeline/timelineTableRow.tsx

@@ -259,15 +259,20 @@ interface TimelineRowProps {
 }
 
 const TimelineRow = styled('div')<TimelineRowProps>`
-  display: contents;
+  grid-column: 1/-1;
+
+  display: grid;
+  grid-template-columns: subgrid;
 
   ${p =>
     !p.singleMonitorView &&
     css`
-      &:nth-child(odd) > * {
+      transition: background 50ms ease-in-out;
+
+      &:nth-child(odd) {
         background: ${p.theme.backgroundSecondary};
       }
-      &:hover > * {
+      &:hover {
         background: ${p.theme.backgroundTertiary};
       }
     `}
@@ -285,17 +290,10 @@ const TimelineRow = styled('div')<TimelineRowProps>`
   /* Disabled monitors become more opaque */
   --disabled-opacity: ${p => (p.isDisabled ? '0.6' : 'unset')};
 
-  &:last-child > *:first-child {
+  &:last-child {
     border-bottom-left-radius: ${p => p.theme.borderRadius};
-  }
-
-  &:last-child > *:last-child {
     border-bottom-right-radius: ${p => p.theme.borderRadius};
   }
-
-  > * {
-    transition: background 50ms ease-in-out;
-  }
 `;
 
 const MonitorEnvContainer = styled('div')`