fix(cdk-experimental/column-resize): Obscure weird behavior in tables that are too wide by conditionally disabling resize (#31100)

(cherry picked from commit 49f9966)

Author: kseamon

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

@@ -40,6 +40,7 @@ import {ResizeRef} from './resize-ref';
 import {ResizeStrategy} from './resize-strategy';
 
 const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';
+const RESIZE_DISABLED_CLASS = 'cdk-resizable-resize-disabled';
 
 /**
  * Base class for Resizable directives which are applied to column headers to make those columns
@@ -181,11 +182,18 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
       .pipe(takeUntilDestroyed)
       .subscribe(hoveringRow => {
         if (hoveringRow) {
-          if (!this.overlayRef) {
-            this.overlayRef = this._createOverlayForHandle();
-          }
+          const tooBigToResize =
+            this.maxWidthPxInternal < Number.MAX_SAFE_INTEGER &&
+            element.offsetWidth > this.maxWidthPxInternal;
+          element.classList.toggle(RESIZE_DISABLED_CLASS, tooBigToResize);
+
+          if (!tooBigToResize) {
+            if (!this.overlayRef) {
+              this.overlayRef = this._createOverlayForHandle();
+            }
 
-          this._showHandleOverlay();
+            this._showHandleOverlay();
+          }
         } else if (this.overlayRef) {
           // todo - can't detach during an active resize - need to work that out
           this.overlayRef.detach();

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

@@ -71,6 +71,10 @@
     .mat-resizable-handle {
       background: $resizable-hover-divider;
     }
+
+    .cdk-resizable-resize-disabled > .mat-resizable-handle {
+      background: $non-resizable-hover-divider;
+    }
   }
 
   [dir='rtl'] {