fix: Tiles general overlap after resize of viewport

* Disabled explicit width/height values when resizing a tile.
* Set grid-auto-rows to explicit size - migrate to grid-template-rows
* Added some more CSS "workarounds"

Author: rkaraivanov

src/components/resize-container/resize-controller.ts

@@ -174,8 +174,8 @@ class ResizeController implements ReactiveController {
 
     this._options.end?.call(this._host, parameters);
     this._state.current = parameters.state.current;
-
-    this._updatePosition(this._resizeTarget);
+    // TODO:
+    // this._updatePosition(this._resizeTarget);
     this.dispose();
   }
 

src/components/tile-manager/themes/tile-manager.base.scss

@@ -14,8 +14,9 @@
     padding: rem(20px);
     width: 100%;
     height: 100%;
-    grid-template-columns: repeat(var(--ig-column-count, auto-fit), minmax(var(--ig-min-col-width), 1fr));
-    grid-auto-rows: minmax(var(--ig-min-row-height), auto);
+    grid-template-columns: repeat(var(--ig-column-count, auto-fit), minmax(min(var(--ig-min-col-width, 100%)), 1fr));
+    grid-auto-rows: minmax(var(--ig-min-row-height), var(--ig-min-row-height));
+    grid-auto-columns: 0;
     grid-gap: var(--ig-gap, rem(10px));
     grid-auto-flow: dense;
     overflow: auto hidden;

src/components/tile-manager/tile.ts

@@ -506,12 +506,13 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
     await transition?.updateCallbackDone;
 
-    const { width, height } = this._resizeState.calculateActualSize(
-      this._cssContainer
-    );
+    // TODO:
+    // const { width, height } = this._resizeState.calculateActualSize(
+    //   this._cssContainer
+    // );
 
-    this._resizeState.resizedDimensions = { width, height };
-    this._resizeContainer?.setSize(width, height);
+    // this._resizeState.resizedDimensions = { width, height };
+    // this._resizeContainer?.setSize(width, height);
     this._setResizeState(false);
   }