ref(crons): Remove has() css selector, add zebra striping (#53117)

Unfortunately the `has()` css relational pseudo-class is not supported
in firefox.

To support the row hover effect I've switched to having a wrapper row
with `display: contents`

This should be more widely supported and allow us to select all elements
in a row relatively easy to change their background both for hover and
zebra striping.

<img width="1242" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/098eb12e-215b-447d-9421-90cc1082e026">

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

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useRef} from 'react';
+import {useCallback, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import Link from 'sentry/components/links/link';
@@ -95,7 +95,7 @@ export function OverviewTimeline({monitorList}: Props) {
       />
 
       {monitorList.map(monitor => (
-        <Fragment key={monitor.id}>
+        <TimelineRow key={monitor.id}>
           <MonitorDetails monitor={monitor} />
           {isLoading || !monitorStats ? (
             <Placeholder />
@@ -110,7 +110,7 @@ export function OverviewTimeline({monitorList}: Props) {
               />
             </div>
           )}
-        </Fragment>
+        </TimelineRow>
       ))}
     </MonitorListPanel>
   );
@@ -133,18 +133,22 @@ function MonitorDetails({monitor}: {monitor: Monitor}) {
 const MonitorListPanel = styled(Panel)`
   display: grid;
   grid-template-columns: 350px 1fr;
+`;
 
-  a,
-  a + div {
-    transition: background 50ms ease-in-out;
-  }
+const TimelineRow = styled('div')`
+  display: contents;
 
-  a:hover,
-  a:hover + div,
-  a:has(+ div:hover),
-  a + div:hover {
+  &:nth-child(odd) > * {
     background: ${p => p.theme.backgroundSecondary};
   }
+
+  &:hover > * {
+    background: ${p => p.theme.backgroundTertiary};
+  }
+
+  > * {
+    transition: background 50ms ease-in-out;
+  }
 `;
 
 const DetailsContainer = styled(Link)`