From 64797b1a87b01616d0a45f8c6ebc702b48c175b7 Mon Sep 17 00:00:00 2001
From: Karl Seamon <bannanafiend@gmail.com>
Date: Mon, 12 May 2025 13:13:27 -0400
Subject: [PATCH] fix(cdk-experimental/column-resize): Obscure weird behavior
 in tables that are too wide by conditionally disabling resize

---
 src/cdk-experimental/column-resize/resizable.ts  | 16 ++++++++++++----
 .../column-resize/_column-resize-theme.scss      |  4 ++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts
index 4a02585e1abe..c0fa419b8384 100644
--- 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
index a9715bb33772..faeb574345d4 100644
--- 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'] {