feat(replay): Allow the bulk-delete confirm dialog to scroll (#95835)

The table scrolls now when there are many items.

When the browser is really short then we'll show as few as ~2.5 items in
the list thanks to the `min-height: 200px;`

<img width="633" height="734" alt="Screenshot 2025-07-17 at 2 12 53 PM"
src="https://github.com/user-attachments/assets/5876487c-b591-4288-b8c9-989cf7f0aa86"
/>

Fixes REPLAY-533

Author: ryan953

static/app/components/replays/table/deleteReplays.tsx

@@ -41,10 +41,10 @@ export default function DeleteReplays({selectedIds, replays, queryOptions}: Prop
     },
   });
 
-  const hasOneProjectSelected = projectIds.length === 1;
   const project = useProjectFromId({
-    project_id: hasOneProjectSelected ? projectIds[0] : undefined,
+    project_id: projectIds.length === 1 ? projectIds[0] : undefined,
   });
+  const hasOneProjectSelected = Boolean(project);
 
   const {bulkDelete, hasAccess, queryOptionsToPayload} = useDeleteReplays({
     projectSlug: project?.slug ?? '',
@@ -68,24 +68,21 @@ export default function DeleteReplays({selectedIds, replays, queryOptions}: Prop
           onClick={() =>
             openConfirmModal({
               bypass: selectedIds !== 'all' && selectedIds.length === 1,
-              renderMessage: _props => (
-                <Fragment>
-                  {selectedIds === 'all' ? (
-                    <ReplayQueryPreview
-                      deletePayload={deletePayload}
-                      project={project!}
-                    />
-                  ) : (
-                    <ErrorBoundary mini>
-                      <ReplayPreviewTable
-                        replays={replays}
-                        selectedIds={selectedIds}
-                        project={project!}
-                      />
-                    </ErrorBoundary>
-                  )}
-                </Fragment>
-              ),
+              renderMessage: _props =>
+                selectedIds === 'all' ? (
+                  <ReplayQueryPreview deletePayload={deletePayload} project={project!} />
+                ) : (
+                  <ErrorBoundary mini>
+                    <Title project={project!}>
+                      {tn(
+                        'The following %s replay will be deleted',
+                        'The following %s replays will be deleted',
+                        selectedIds.length
+                      )}
+                    </Title>
+                    <ReplayPreviewTable replays={replays} selectedIds={selectedIds} />
+                  </ErrorBoundary>
+                ),
               renderConfirmButton: ({defaultOnClick}) => (
                 <Button onClick={defaultOnClick} priority="danger">
                   {t('Delete')}
@@ -148,79 +145,68 @@ function ReplayQueryPreview({
 }
 
 function ReplayPreviewTable({
-  project,
   replays,
   selectedIds,
 }: {
-  project: Project;
   replays: ReplayListRecord[];
   selectedIds: string[];
 }) {
   return (
-    <Fragment>
-      <Title project={project}>
-        {tn(
-          'The following %s replay will be deleted',
-          'The following %s replays will be deleted',
-          selectedIds.length
-        )}
-      </Title>
-      <SimpleTableWithTwoColumns>
-        <SimpleTable.Header>
-          <SimpleTable.HeaderCell>{t('Replay')}</SimpleTable.HeaderCell>
-          <SimpleTable.HeaderCell>{t('Duration')}</SimpleTable.HeaderCell>
-        </SimpleTable.Header>
-        {selectedIds.map(id => {
-          const replay = replays.find(r => r.id === id) as ReplayListRecord;
-          if (replay.is_archived) {
-            return null;
-          }
-          invariant(
-            replay.duration && replay.started_at,
-            'For TypeScript: replay.duration and replay.started_at are implied because replay.is_archived is false'
-          );
+    <SimpleTableWithTwoColumns>
+      <SimpleTable.Header>
+        <SimpleTable.HeaderCell>{t('Replay')}</SimpleTable.HeaderCell>
+        <SimpleTable.HeaderCell>{t('Duration')}</SimpleTable.HeaderCell>
+      </SimpleTable.Header>
+      {selectedIds.map(id => {
+        const replay = replays.find(r => r.id === id) as ReplayListRecord;
+        if (replay.is_archived) {
+          return null;
+        }
+        invariant(
+          replay.duration && replay.started_at,
+          'For TypeScript: replay.duration and replay.started_at are implied because replay.is_archived is false'
+        );
 
-          return (
-            <SimpleTable.Row key={id}>
-              <SimpleTable.RowCell>
-                <Flex key="session" align="center" gap={space(1)}>
-                  <UserAvatar
-                    user={{
-                      username: replay.user?.display_name || '',
-                      email: replay.user?.email || '',
-                      id: replay.user?.id || '',
-                      ip_address: replay.user?.ip || '',
-                      name: replay.user?.username || '',
-                    }}
-                    size={24}
-                  />
-                  <SubText>
-                    <Flex gap={space(0.5)} align="flex-start">
-                      <DisplayName>
-                        {replay.user.display_name || t('Anonymous User')}
-                      </DisplayName>
-                    </Flex>
+        return (
+          <SimpleTable.Row key={id}>
+            <SimpleTable.RowCell>
+              <Flex key="session" align="center" gap={space(1)}>
+                <UserAvatar
+                  user={{
+                    username: replay.user?.display_name || '',
+                    email: replay.user?.email || '',
+                    id: replay.user?.id || '',
+                    ip_address: replay.user?.ip || '',
+                    name: replay.user?.username || '',
+                  }}
+                  size={24}
+                />
+                <SubText>
+                  <Flex gap={space(0.5)} align="flex-start">
+                    <DisplayName>
+                      {replay.user.display_name || t('Anonymous User')}
+                    </DisplayName>
+                  </Flex>
+                  <Flex gap={space(0.5)}>
+                    {getShortEventId(replay.id)}
                     <Flex gap={space(0.5)}>
-                      {getShortEventId(replay.id)}
-                      <Flex gap={space(0.5)}>
-                        <IconCalendar color="gray300" size="xs" />
-                        <TimeSince date={replay.started_at} />
-                      </Flex>
+                      <IconCalendar color="gray300" size="xs" />
+                      <TimeSince date={replay.started_at} />
                     </Flex>
-                  </SubText>
-                </Flex>
-              </SimpleTable.RowCell>
-              <SimpleTable.RowCell justify="flex-end">
-                <Duration
-                  duration={[replay.duration.asMilliseconds() ?? 0, 'ms']}
-                  precision="sec"
-                />
-              </SimpleTable.RowCell>
-            </SimpleTable.Row>
-          );
-        })}
-      </SimpleTableWithTwoColumns>
-    </Fragment>
+                  </Flex>
+                </SubText>
+              </Flex>
+            </SimpleTable.RowCell>
+            <SimpleTable.RowCell justify="flex-end">
+              <Duration
+                duration={[replay.duration.asMilliseconds() ?? 0, 'ms']}
+                precision="sec"
+              />
+            </SimpleTable.RowCell>
+          </SimpleTable.Row>
+        );
+      })}
+    </SimpleTableWithTwoColumns>
   );
 }
 
@@ -246,6 +232,16 @@ function Title({children, project}: {children: React.ReactNode; project: Project
 
 const SimpleTableWithTwoColumns = styled(SimpleTable)`
   grid-template-columns: 1fr max-content;
+
+  max-height: calc(100vh - 315px);
+  min-height: 200px;
+  overflow-y: auto;
+
+  & > div:first-child {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
 `;
 
 const SubText = styled('div')`