fix(replays): Redraw the Replay Details Console & DOM tab items when things are resized (#46028)

Fixes https://github.com/getsentry/sentry/issues/44859

static/app/views/replays/detail/console/index.tsx

@@ -28,7 +28,7 @@ function Console({breadcrumbs, startTimestampMs}: Props) {
   const clearSearchTerm = () => setSearchTerm('');
 
   const listRef = useRef<ReactVirtualizedList>(null);
-  const {cache} = useVirtualizedList({
+  const {cache, updateList} = useVirtualizedList({
     cellMeasurer: {
       fixedWidth: true,
       minHeight: 24,
@@ -63,7 +63,7 @@ function Console({breadcrumbs, startTimestampMs}: Props) {
       <ConsoleFilters breadcrumbs={breadcrumbs} {...filterProps} />
       <ConsoleLogContainer>
         {breadcrumbs ? (
-          <AutoSizer>
+          <AutoSizer onResize={updateList}>
             {({width, height}) => (
               <ReactVirtualizedList
                 deferredMeasurementCache={cache}

static/app/views/replays/detail/domMutations/index.tsx

@@ -31,7 +31,7 @@ function DomMutations({replay, startTimestampMs}: Props) {
   const clearSearchTerm = () => setSearchTerm('');
 
   const listRef = useRef<ReactVirtualizedList>(null);
-  const {cache} = useVirtualizedList({
+  const {cache, updateList} = useVirtualizedList({
     cellMeasurer: {
       fixedWidth: true,
       minHeight: 82,
@@ -68,7 +68,7 @@ function DomMutations({replay, startTimestampMs}: Props) {
         {isLoading || !actions ? (
           <Placeholder height="100%" />
         ) : (
-          <AutoSizer>
+          <AutoSizer onResize={updateList}>
             {({width, height}) => (
               <ReactVirtualizedList
                 deferredMeasurementCache={cache}

static/app/views/replays/detail/useVirtualizedList.tsx

@@ -1,4 +1,4 @@
-import {DependencyList, RefObject, useEffect, useMemo} from 'react';
+import {DependencyList, RefObject, useCallback, useEffect, useMemo} from 'react';
 import {CellMeasurerCache, CellMeasurerCacheParams, List} from 'react-virtualized';
 
 type Opts = {
@@ -9,14 +9,19 @@ type Opts = {
 function useVirtualizedList({cellMeasurer, deps, ref}: Opts) {
   const cache = useMemo(() => new CellMeasurerCache(cellMeasurer), [cellMeasurer]);
 
-  // Restart cache when items changes
-  useEffect(() => {
+  const updateList = useCallback(() => {
     cache.clearAll();
     ref.current?.forceUpdateGrid();
-  }, [cache, ref, deps]);
+  }, [cache, ref]);
+
+  // Restart cache when items changes
+  useEffect(() => {
+    updateList();
+  }, [updateList, deps]);
 
   return {
     cache,
+    updateList,
   };
 }