fix(trace-view): Update horizontal scrolling on toggle (#25727)

On toggle, horizontal scrolling does not get updated leaving the row in an
unexpected state. This causes issues with horizontal scrolling because the width
of the row isn't correctly set.

static/app/views/performance/traceDetails/transactionBar.tsx

@@ -428,18 +428,16 @@ class TransactionBar extends React.Component<Props, State> {
         cursor={isTraceFullDetailed(transaction) ? 'pointer' : 'default'}
       >
         <ScrollbarManager.Consumer>
-          {scrollbarManagerChildrenProps => {
-            return (
-              <DividerHandlerManager.Consumer>
-                {dividerHandlerChildrenProps =>
-                  this.renderHeader({
-                    dividerHandlerChildrenProps,
-                    scrollbarManagerChildrenProps,
-                  })
-                }
-              </DividerHandlerManager.Consumer>
-            );
-          }}
+          {scrollbarManagerChildrenProps => (
+            <DividerHandlerManager.Consumer>
+              {dividerHandlerChildrenProps =>
+                this.renderHeader({
+                  dividerHandlerChildrenProps,
+                  scrollbarManagerChildrenProps,
+                })
+              }
+            </DividerHandlerManager.Consumer>
+          )}
         </ScrollbarManager.Consumer>
         {isTraceFullDetailed(transaction) && isVisible && showDetail && (
           <TransactionDetail

static/app/views/performance/traceDetails/transactionGroup.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import {Location} from 'history';
 
+import {
+  ScrollbarManagerChildrenProps,
+  withScrollbarManager,
+} from 'app/components/events/interfaces/spans/scrollbarManager';
 import {Organization} from 'app/types';
 import {TraceFullDetailed} from 'app/utils/performance/quickTrace/types';
 
 import TransactionBar from './transactionBar';
 import {TraceInfo, TraceRoot, TreeDepth} from './types';
 
-type Props = {
+type Props = ScrollbarManagerChildrenProps & {
   location: Location;
   organization: Organization;
   transaction: TraceRoot | TraceFullDetailed;
@@ -31,6 +35,12 @@ class TransactionGroup extends React.Component<Props, State> {
     isExpanded: true,
   };
 
+  componentDidUpdate(_prevProps: Props, prevState: State) {
+    if (prevState.isExpanded !== this.state.isExpanded) {
+      this.props.updateScrollState();
+    }
+  }
+
   toggleExpandedState = () => {
     this.setState(({isExpanded}) => ({isExpanded: !isExpanded}));
   };
@@ -75,4 +85,4 @@ class TransactionGroup extends React.Component<Props, State> {
   }
 }
 
-export default TransactionGroup;
+export default withScrollbarManager(TransactionGroup);