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

kseamon · Andrew Seguin · commit 08ccf3c68543 · 2025-05-13T13:48:05.000-06:00
(cherry picked from commit 49f9966)
diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts
@@ -46,6 +46,7 @@ import {ResizeStrategy} from './resize-strategy';
 import {_CoalescedStyleScheduler} from './coalesced-style-scheduler';
 
 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
@@ -188,11 +189,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();
diff --git a/src/material-experimental/column-resize/_column-resize-theme.scss b/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'] {

Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,10 @@`
`71`	`71`	`.mat-resizable-handle {`
`72`	`72`	`background: $resizable-hover-divider;`
`73`	`73`	`}`
	`74`	`+`
	`75`	`+ .cdk-resizable-resize-disabled > .mat-resizable-handle {`
	`76`	`+ background: $non-resizable-hover-divider;`
	`77`	`+ }`
`74`	`78`	`}`
`75`	`79`
`76`	`80`	`[dir='rtl'] {`