fix(trace): Fix span bars rendering too far to the right when scrollbar is visible

static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.spec.tsx

@@ -41,6 +41,50 @@ describe('VirtualizedViewManger', () => {
     expect(manager.view.trace_physical_space.serialize()).toEqual([0, 0, 500, 1]);
   });
 
+  it('re-dispatches the container content box when scrollbar width changes', () => {
+    const scheduler = new TraceScheduler();
+    const manager = new VirtualizedViewManager(
+      {
+        list: {width: 0.5},
+        span_list: {width: 0.5},
+      },
+      scheduler,
+      new TraceView(),
+      ThemeFixture()
+    );
+
+    manager.view.setTracePhysicalSpace([0, 0, 500, 200], [0, 0, 250, 200]);
+
+    const container = document.createElement('div');
+    container.style.paddingTop = '38px';
+    container.style.paddingLeft = '10px';
+    container.style.paddingRight = '10px';
+    manager.container = container;
+
+    jest.spyOn(container, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      bottom: 238,
+      right: 520,
+      width: 520,
+      height: 238,
+      toJSON: () => ({}),
+    } as DOMRect);
+
+    let dispatchedContainerPhysicalSpace: [number, number, number, number] | null = null;
+    scheduler.on('set container physical space', containerPhysicalSpace => {
+      dispatchedContainerPhysicalSpace = containerPhysicalSpace;
+    });
+
+    manager.onScrollbarWidthChange(14);
+
+    // 520 - 10 (paddingLeft) - 10 (paddingRight) = 500
+    // 238 - 38 (paddingTop) = 200
+    expect(dispatchedContainerPhysicalSpace).toEqual([0, 0, 500, 200]);
+  });
+
   describe('computeSpanCSSMatrixTransform', () => {
     it('enforces min scaling', () => {
       const manager = new VirtualizedViewManager(

static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx

@@ -102,7 +102,7 @@ export class VirtualizedViewManager {
 
   row_depth_padding = 22;
 
-  private scrollbar_width = 0;
+  scrollbar_width = 0;
   // the transformation matrix that is used to render scaled elements to the DOM
   private span_to_px: mat3 = mat3.create();
   private readonly ROW_PADDING_PX = 16;
@@ -240,7 +240,7 @@ export class VirtualizedViewManager {
     }
 
     this.view.trace_physical_space.width =
-      span_list * this.view.trace_container_physical_space.width;
+      span_list * (this.view.trace_container_physical_space.width - this.scrollbar_width);
 
     this.scheduler.dispatch('set trace view', {
       x: this.view.trace_view.x,
@@ -259,6 +259,40 @@ export class VirtualizedViewManager {
       return;
     }
     this.scrollbar_width = width;
+
+    // Re-dispatch the container content box so that the trace_physical_space is
+    // recomputed accounting for the new scrollbar width using the same box
+    // model as ResizeObserver's contentRect.
+    const containerPhysicalSpace = this.getContainerContentPhysicalSpace();
+    if (containerPhysicalSpace) {
+      this.scheduler.dispatch('set container physical space', containerPhysicalSpace);
+    }
+  }
+
+  private getContainerContentPhysicalSpace():
+    | [x: number, y: number, width: number, height: number]
+    | null {
+    if (!this.container) {
+      return null;
+    }
+
+    const rect = this.container.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      return null;
+    }
+
+    const getBoxSize = (value: string) => Number.parseFloat(value) || 0;
+    const styles = window.getComputedStyle(this.container);
+    const paddingX = getBoxSize(styles.paddingLeft) + getBoxSize(styles.paddingRight);
+    const paddingY = getBoxSize(styles.paddingTop) + getBoxSize(styles.paddingBottom);
+    const borderX =
+      getBoxSize(styles.borderLeftWidth) + getBoxSize(styles.borderRightWidth);
+    const borderY =
+      getBoxSize(styles.borderTopWidth) + getBoxSize(styles.borderBottomWidth);
+    const width = Math.max(rect.width - paddingX - borderX, 0);
+    const height = Math.max(rect.height - paddingY - borderY, 0);
+
+    return [0, 0, width, height];
   }
 
   registerContainerRef(container: HTMLElement | null) {

static/app/views/performance/newTraceDetails/useTraceSpaceListeners.tsx

@@ -24,10 +24,15 @@ export function useTraceSpaceListeners(props: {
 
     const onPhysicalSpaceChange: TraceEvents['set container physical space'] =
       container => {
+        // Subtract the scrollbar width from the container width so that the
+        // physical space matches the actual renderable column width. When a
+        // vertical scrollbar is visible, the rows inside the scroll container
+        // are narrower than the outer container measured by ResizeObserver.
+        const adjustedWidth = container[2] - props.viewManager.scrollbar_width;
         props.view.setTracePhysicalSpace(container, [
           0,
           0,
-          container[2] * props.viewManager.columns.span_list.width,
+          adjustedWidth * props.viewManager.columns.span_list.width,
           container[3],
         ]);
       };