fix: resizing a tile more than the viewport receives max column spans

Author: onlyexeption

src/components/tile-manager/tile-resize.spec.ts

@@ -226,5 +226,34 @@ describe('Tile resize', () => {
       expect(eventSpy).calledWith('igcResize');
       expect(tile.getAttribute('part')).to.include('resizing');
     });
+
+    it('tile should not span more columns than the column count', async () => {
+      const tile = first(getTiles());
+      const tileDOM = getTileDOM(tile);
+      const eventSpy = spy(tileDOM.resizeElement, 'emitEvent');
+
+      tileManager.columnCount = 3;
+
+      simulatePointerDown(tileDOM.resizeTrigger);
+      await elementUpdated(tileDOM.resizeElement);
+
+      expect(eventSpy).calledWith('igcResizeStart');
+
+      simulatePointerMove(tileDOM.resizeTrigger, {
+        clientX: 3000,
+      });
+      await elementUpdated(tileDOM.resizeElement);
+
+      expect(eventSpy).calledWith('igcResize');
+
+      simulateLostPointerCapture(tileDOM.resizeTrigger);
+      await elementUpdated(tileDOM.resizeElement);
+
+      expect(eventSpy).calledWith('igcResizeEnd');
+
+      expect(
+        Number.parseFloat(getComputedStyle(tile).gridColumn.split(' ')[1])
+      ).to.equal(tileManager.columnCount);
+    });
   });
 });

src/components/tile-manager/tile.ts

@@ -542,10 +542,21 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   private _handleResizeEnd(event: CustomEvent<ResizeCallbackParams>) {
     const state = event.detail.state;
-    const width = state.current.width;
     const height = state.current.height;
+    let width = state.current.width;
 
-    const colSpan = Math.max(1, Math.round(width / this.gridColumnWidth));
+    if (width > this.parentElement!.getBoundingClientRect().width) {
+      width =
+        this.parentElement!.getBoundingClientRect().width - state.current.x;
+    }
+
+    let colSpan = Math.max(
+      1,
+      Math.round(width / (this.gridColumnWidth + this._cachedStyles.gap!))
+    );
+    colSpan = this._cachedStyles.columnCount
+      ? Math.min(colSpan, this._cachedStyles.columnCount!)
+      : colSpan;
 
     const initialTop = event.detail.state.initial.top + window.scrollY;
     const startRowIndex = ResizeUtil.calculate(