fix(cdk-experimental/column-resize): Fix lazy resize mode (broken by ##30378)

Author: kseamon

src/cdk-experimental/column-resize/column-resize.ts

@@ -65,6 +65,9 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
   /** The id attribute of the table, if specified. */
   id?: string;
 
+  /** @docs-private Whether a call to updateStickyColumnStyles is pending after a resize. */
+  _flushPending = false;
+
   /**
    * Whether to update the column's width continuously as the mouse position
    * changes, or to wait until mouseup to apply the new size.

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -54,27 +54,15 @@ export abstract class ResizeStrategy implements OnDestroy {
 
   /** Adjusts the width of the table element by the specified delta. */
   protected updateTableWidthAndStickyColumns(delta: number): void {
-    if (this._pendingResizeDelta === null) {
-      const tableElement = this.columnResize.elementRef.nativeElement;
-      const tableWidth = this.getElementWidth(tableElement);
+    this.columnResize._flushPending = true;
 
-      this.styleScheduler.schedule(() => {
-        tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta!);
-
-        this._pendingResizeDelta = null;
-      });
-
-      this.styleScheduler.scheduleEnd(() => {
-        // Once the column sizes have updated, we unset the table width so that
-        // it does not have unwanted side effects on future changes in the table
-        // such as columns being added or removed.
-        tableElement.style.width = '';
-
-        this.table.updateStickyColumnStyles();
-      });
-    }
-
-    this._pendingResizeDelta = (this._pendingResizeDelta ?? 0) + delta;
+    this.styleScheduler.scheduleEnd(() => {
+      if (!this.columnResize._flushPending) {
+        return;
+      }
+      this.columnResize._flushPending = false;
+      this.table.updateStickyColumnStyles();
+    });
   }
 
   /** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */

src/material-experimental/column-resize/_column-resize-theme.scss

@@ -10,6 +10,7 @@
   // Required for resizing to work properly.
   .mat-column-resize-table.cdk-column-resize-with-resized-column {
     table-layout: fixed;
+    width: fit-content;
   }
 
   .mat-column-resize-flex {