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

This reverts commit 849108f.

Co-authored-by: ryan953 <[email protected]>

Author: getsentry-bot

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

@@ -1,4 +1,3 @@
-import type {RefObject} from 'react';
 import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/core/alert';
@@ -26,15 +25,13 @@ 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,
@@ -46,7 +43,6 @@ export default function ReplayTable({
     return (
       <StyledSimpleTable
         data-test-id="replay-table-loading"
-        ref={ref}
         style={{gridTemplateColumns}}
       >
         <ReplayTableHeader
@@ -66,7 +62,6 @@ export default function ReplayTable({
     return (
       <StyledSimpleTable
         data-test-id="replay-table-errored"
-        ref={ref}
         style={{gridTemplateColumns}}
       >
         <ReplayTableHeader
@@ -87,11 +82,7 @@ export default function ReplayTable({
   }
 
   return (
-    <StyledSimpleTable
-      data-test-id="replay-table"
-      ref={ref}
-      style={{gridTemplateColumns}}
-    >
+    <StyledSimpleTable data-test-id="replay-table" style={{gridTemplateColumns}}>
       <ReplayTableHeader
         columns={columns}
         onSortClick={onSortClick}
@@ -150,6 +141,8 @@ 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,10 +584,11 @@ export const ReplaySessionColumn: ReplayTableColumn = {
             size={24}
           />
           <SubText>
-            <DisplayName data-underline-on-hover>
-              {replay.user.display_name || t('Anonymous User')}
-            </DisplayName>
-
+            <Flex gap="xs" align="start">
+              <DisplayName data-underline-on-hover>
+                {replay.user.display_name || t('Anonymous User')}
+              </DisplayName>
+            </Flex>
             <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}
@@ -666,7 +667,6 @@ 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, RefObject} from 'react';
+import type {ComponentProps, CSSProperties, HTMLAttributes} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -10,7 +10,6 @@ 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, useRef} from 'react';
+import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
@@ -9,6 +9,17 @@ 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';
@@ -25,7 +36,6 @@ 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';
@@ -35,10 +45,30 @@ 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();
@@ -47,9 +77,6 @@ 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),
@@ -82,7 +109,7 @@ export default function ReplayIndexTable() {
   const replays = data?.data?.map(mapResponseToReplayRecord) ?? [];
 
   const {allMobileProj} = useAllMobileProj({});
-  const columns = useReplayIndexTableColumns({allMobileProj, tableDimensions});
+  const columns = allMobileProj ? COLUMNS_MOBILE : COLUMNS_WEB;
 
   const needsSDKUpdateForClickSearch = useNeedsSDKUpdateForClickSearch(query);
 
@@ -142,7 +169,6 @@ export default function ReplayIndexTable() {
           </Fragment>
         ) : (
           <ReplayTable
-            ref={tableRef}
             columns={columns}
             error={error}
             isPending={isPending}