fix(replays): fix card row display when less than 3 replays (#53639)

One replay: 
<img width="1215" alt="SCR-20230726-mfbd"
src="https://github.com/getsentry/sentry/assets/56095982/56d205b5-8aa0-4e2d-bcd6-634b377a60d7">


Two replays:
<img width="1188" alt="SCR-20230726-kjzj"
src="https://github.com/getsentry/sentry/assets/56095982/fc84f0ef-323c-4f05-851f-ed65596ce568">

Three replays:
<img width="1166" alt="SCR-20230726-kvjx"
src="https://github.com/getsentry/sentry/assets/56095982/dc0df6fb-a4fe-4d6a-a1c6-e68a39180b89">

Different number of replays for the two tables:
<img width="1207" alt="SCR-20230726-mcfc"
src="https://github.com/getsentry/sentry/assets/56095982/fba69fff-5c6b-43b8-a344-d1fb0e777b17">

static/app/views/replays/list/replaysErroneousDeadRageCards.tsx

@@ -149,6 +149,11 @@ function CardTable({
     perPage: 3,
   });
 
+  const gridRows = new Array(replays ? (replays.length > 0 ? 3 : 1) : 1)
+    .fill(' ')
+    .map(_ => '1fr')
+    .join(' ');
+
   return (
     <ReplayTable
       fetchError={fetchError}
@@ -157,6 +162,7 @@ function CardTable({
       sort={undefined}
       visibleColumns={visibleColumns}
       saveLocation
+      gridRows={'auto ' + gridRows}
     />
   );
 }
@@ -165,6 +171,7 @@ const SplitCardContainer = styled('div')`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: ${space(2)};
+  align-items: stretch;
 `;
 
 export default ReplaysErroneousDeadRageCards;

static/app/views/replays/replayTable/index.tsx

@@ -34,6 +34,7 @@ type Props = {
   sort: Sort | undefined;
   visibleColumns: ReplayColumn[];
   emptyMessage?: ReactNode;
+  gridRows?: string;
   saveLocation?: boolean;
 };
 
@@ -45,6 +46,7 @@ function ReplayTable({
   visibleColumns,
   emptyMessage,
   saveLocation,
+  gridRows,
 }: Props) {
   const routes = useRoutes();
   const newLocation = useLocation();
@@ -73,6 +75,7 @@ function ReplayTable({
         isLoading={false}
         visibleColumns={visibleColumns}
         data-test-id="replay-table"
+        gridRows={undefined}
       >
         <StyledAlert type="error" showIcon>
           {typeof fetchError === 'string'
@@ -97,6 +100,7 @@ function ReplayTable({
       disablePadding
       data-test-id="replay-table"
       emptyMessage={emptyMessage}
+      gridRows={isFetching ? undefined : gridRows}
     >
       {replays?.map(replay => {
         return (
@@ -191,6 +195,7 @@ const flexibleColumns = [
 
 const StyledPanelTable = styled(PanelTable)<{
   visibleColumns: ReplayColumn[];
+  gridRows?: string;
 }>`
   grid-template-columns: ${p =>
     p.visibleColumns
@@ -199,6 +204,8 @@ const StyledPanelTable = styled(PanelTable)<{
         flexibleColumns.includes(column) ? 'minmax(100px, 1fr)' : 'max-content'
       )
       .join(' ')};
+
+  ${props => (props.gridRows ? `grid-template-rows: ${props.gridRows};` : '')}
 `;
 
 const StyledAlert = styled(Alert)`