fix(replay): Adjust number of columns on Replay List depending on container size (#97791)

The columns visible change dynamically:

| Desc | Img |
| --- | --- |
| Wide | <img width="793" height="146" alt="SCR-20250813-kedn"
src="https://github.com/user-attachments/assets/463034c9-8917-470a-9cf1-47342a77d362"
/>
| Medium | <img width="590" height="119" alt="SCR-20250813-kece"
src="https://github.com/user-attachments/assets/5185ad55-4ad3-4d6b-b519-85ed4e3f241a"
/>
| Narrow | <img width="430" height="146" alt="SCR-20250813-kecv"
src="https://github.com/user-attachments/assets/c87d515f-843b-4f23-b5c3-9cb43a0dfa88"
/>


I also removed an extra `<Flex>` which helps to make the emails truncate
with an ellipsis. The 2nd row doesn't get an ellipsis though right now.
<img width="328" height="136" alt="SCR-20250813-kdyk"
src="https://github.com/user-attachments/assets/c88d67fa-e2ac-4b02-a7cf-bd5825ae0dca"
/>

Fixes REPLAY-623

Co-authored-by: Nar Saynorath <[email protected]>

Author: ryan953

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

@@ -1,3 +1,4 @@
+import type {RefObject} from 'react';
 import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/core/alert';
@@ -25,13 +26,15 @@ type Props = SortProps & {
   isPending: boolean;
   replays: ReplayListRecord[];
   showDropdownFilters: boolean;
+  ref?: RefObject<HTMLDivElement | null>;
 };
 
 export default function ReplayTable({
   columns,
   error,
   isPending,
   onSortClick,
+  ref,
   replays,
   showDropdownFilters,
   sort,
@@ -43,6 +46,7 @@ export default function ReplayTable({
     return (
       <StyledSimpleTable
         data-test-id="replay-table-loading"
+        ref={ref}
         style={{gridTemplateColumns}}
       >
         <ReplayTableHeader
@@ -62,6 +66,7 @@ export default function ReplayTable({
     return (
       <StyledSimpleTable
         data-test-id="replay-table-errored"
+        ref={ref}
         style={{gridTemplateColumns}}
       >
         <ReplayTableHeader
@@ -82,7 +87,11 @@ export default function ReplayTable({
   }
 
   return (
-    <StyledSimpleTable data-test-id="replay-table" style={{gridTemplateColumns}}>
+    <StyledSimpleTable
+      data-test-id="replay-table"
+      ref={ref}
+      style={{gridTemplateColumns}}
+    >
       <ReplayTableHeader
         columns={columns}
         onSortClick={onSortClick}
@@ -141,8 +150,6 @@ function getErrorMessage(fetchError: RequestError) {
 }
 
 const RowCell = styled(SimpleTable.RowCell)`
-  overflow-x: auto;
-
   /* Used for cell menu items that are hidden by default */
   &:hover [data-visible-on-hover='true'] {
     opacity: 1;

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

@@ -584,11 +584,10 @@ export const ReplaySessionColumn: ReplayTableColumn = {
             size={24}
           />
           <SubText>
-            <Flex gap="xs" align="start">
-              <DisplayName data-underline-on-hover>
-                {replay.user.display_name || t('Anonymous User')}
-              </DisplayName>
-            </Flex>
+            <DisplayName data-underline-on-hover>
+              {replay.user.display_name || t('Anonymous User')}
+            </DisplayName>
+
             <Flex gap="xs">
               {/* Avatar is used instead of ProjectBadge because using ProjectBadge increases spacing, which doesn't look as good */}
               {project ? <ProjectAvatar size={12} project={project} /> : null}
@@ -667,6 +666,7 @@ const CellLink = styled(Link)`
   margin: -${p => p.theme.space.xl};
   padding: ${p => p.theme.space.xl};
   flex-grow: 1;
+  width: 100%;
 
   &:before {
     content: '';

static/app/components/tables/simpleTable/index.tsx

@@ -1,4 +1,4 @@
-import type {ComponentProps, CSSProperties, HTMLAttributes} from 'react';
+import type {ComponentProps, CSSProperties, HTMLAttributes, RefObject} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -10,6 +10,7 @@ import {defined} from 'sentry/utils';
 
 interface TableProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
+  ref?: RefObject<HTMLDivElement | null>;
 }
 
 interface RowProps extends HTMLAttributes<HTMLDivElement> {

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

@@ -1,4 +1,4 @@
-import {Fragment, useMemo} from 'react';
+import {Fragment, useMemo, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
@@ -9,17 +9,6 @@ import {
   useNeedsJetpackComposePiiNotice,
 } from 'sentry/components/replays/jetpackComposePiiNotice';
 import ReplayTable from 'sentry/components/replays/table/replayTable';
-import {
-  ReplayActivityColumn,
-  ReplayBrowserColumn,
-  ReplayCountDeadClicksColumn,
-  ReplayCountErrorsColumn,
-  ReplayCountRageClicksColumn,
-  ReplayDurationColumn,
-  ReplayOSColumn,
-  ReplaySelectColumn,
-  ReplaySessionColumn,
-} from 'sentry/components/replays/table/replayTableColumns';
 import useReplayTableSort from 'sentry/components/replays/table/useReplayTableSort';
 import {t, tct} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -36,6 +25,7 @@ import {
 } from 'sentry/utils/replays/sdkVersions';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import {useDimensions} from 'sentry/utils/useDimensions';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -45,30 +35,10 @@ import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 import BulkDeleteAlert from 'sentry/views/replays/list/bulkDeleteAlert';
 import ReplaysFilters from 'sentry/views/replays/list/filters';
 import ReplaysSearch from 'sentry/views/replays/list/search';
+import useReplayIndexTableColumns from 'sentry/views/replays/list/useReplayIndexTableColumns';
 import DeadRageSelectorCards from 'sentry/views/replays/selectors/deadRageSelectorCards';
 import type {ReplayListRecord} from 'sentry/views/replays/types';
 
-const COLUMNS_WEB = [
-  ReplaySelectColumn,
-  ReplaySessionColumn,
-  ReplayOSColumn,
-  ReplayBrowserColumn,
-  ReplayDurationColumn,
-  ReplayCountDeadClicksColumn,
-  ReplayCountRageClicksColumn,
-  ReplayCountErrorsColumn,
-  ReplayActivityColumn,
-] as const;
-
-const COLUMNS_MOBILE = [
-  ReplaySelectColumn,
-  ReplaySessionColumn,
-  ReplayOSColumn,
-  ReplayDurationColumn,
-  ReplayCountErrorsColumn,
-  ReplayActivityColumn,
-] as const;
-
 export default function ReplayIndexTable() {
   const queryClient = useQueryClient();
   const organization = useOrganization();
@@ -77,6 +47,9 @@ export default function ReplayIndexTable() {
     selection: {projects},
   } = usePageFilters();
 
+  const tableRef = useRef<HTMLDivElement>(null);
+  const tableDimensions = useDimensions({elementRef: tableRef});
+
   const rageClicksSdkVersion = useProjectSdkNeedsUpdate({
     minVersion: MIN_DEAD_RAGE_CLICK_SDK.minVersion,
     projectId: projects.map(String),
@@ -109,7 +82,7 @@ export default function ReplayIndexTable() {
   const replays = data?.data?.map(mapResponseToReplayRecord) ?? [];
 
   const {allMobileProj} = useAllMobileProj({});
-  const columns = allMobileProj ? COLUMNS_MOBILE : COLUMNS_WEB;
+  const columns = useReplayIndexTableColumns({allMobileProj, tableDimensions});
 
   const needsSDKUpdateForClickSearch = useNeedsSDKUpdateForClickSearch(query);
 
@@ -169,6 +142,7 @@ export default function ReplayIndexTable() {
           </Fragment>
         ) : (
           <ReplayTable
+            ref={tableRef}
             columns={columns}
             error={error}
             isPending={isPending}

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

@@ -0,0 +1,75 @@
+import {useMemo} from 'react';
+
+import {
+  ReplayActivityColumn,
+  ReplayBrowserColumn,
+  ReplayCountDeadClicksColumn,
+  ReplayCountErrorsColumn,
+  ReplayCountRageClicksColumn,
+  ReplayDurationColumn,
+  ReplayOSColumn,
+  ReplaySelectColumn,
+  ReplaySessionColumn,
+} from 'sentry/components/replays/table/replayTableColumns';
+import type {useDimensions} from 'sentry/utils/useDimensions';
+
+const MOBILE = [
+  ReplaySelectColumn,
+  ReplaySessionColumn,
+  ReplayOSColumn,
+  ReplayDurationColumn,
+  ReplayCountErrorsColumn,
+  ReplayActivityColumn,
+] as const;
+
+const WEB_MAX_1000 = [
+  ReplaySelectColumn,
+  ReplaySessionColumn,
+  ReplayOSColumn,
+  ReplayBrowserColumn,
+  ReplayDurationColumn,
+  ReplayCountErrorsColumn,
+  ReplayActivityColumn,
+] as const;
+
+const WEB_MAX_800 = [
+  ReplaySelectColumn,
+  ReplaySessionColumn,
+  ReplayOSColumn,
+  ReplayBrowserColumn,
+  ReplayDurationColumn,
+  ReplayCountErrorsColumn,
+] as const;
+
+const WEB_ALL = [
+  ReplaySelectColumn,
+  ReplaySessionColumn,
+  ReplayOSColumn,
+  ReplayBrowserColumn,
+  ReplayDurationColumn,
+  ReplayCountDeadClicksColumn,
+  ReplayCountRageClicksColumn,
+  ReplayCountErrorsColumn,
+  ReplayActivityColumn,
+] as const;
+
+export default function useReplayIndexTableColumns({
+  allMobileProj,
+  tableDimensions,
+}: {
+  allMobileProj: boolean;
+  tableDimensions: ReturnType<typeof useDimensions>;
+}) {
+  return useMemo(() => {
+    if (allMobileProj) {
+      return MOBILE;
+    }
+    if (tableDimensions.width < 800) {
+      return WEB_MAX_800;
+    }
+    if (tableDimensions.width < 1000) {
+      return WEB_MAX_1000;
+    }
+    return WEB_ALL;
+  }, [allMobileProj, tableDimensions.width]);
+}