Modify tiles' spans for Tile Manager (#3855)

* fix(tilemanager): modify the tiles span; Мake Order Info content scrollable

Author: mtsvyatkova

src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.html

@@ -1,5 +1,5 @@
 <igc-tile-manager id="tile-manager1" column-count="3" gap="20px" resize-mode="hover" drag-mode="tile-header">
-    <igc-tile row-span="3">
+    <igc-tile row-span="2" class="order-info">
         <span slot="title">Order info</span>
         <igx-list>
             <igx-list-item>
@@ -143,7 +143,7 @@ <h3 igxCardHeaderTitle>Carnavon Tigers</h3>
             </div>
         </div>
     </igc-tile>
-    <igc-tile >
+    <igc-tile col-span="2">
         <span slot="title">Order Value</span>
         <div class="string">
             <h3>$8.66K</h3>

src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.scss

@@ -1,43 +1,58 @@
 igc-tile-manager {
-    margin-bottom: 5px;
-  }
-  
-  .group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-top: 15px;
-  }
-  
-  .card {
-    min-height: 30px;
-    min-width: 250px;
-    max-width: 320px;
-    margin: 0 15px 15px 15px
-  }
-  
-  igx-card-content {
-    color: var(--content-text-color);
-  }
-  
-  .body-content {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .string {
-    text-align: center;
-    margin-top: 50px;
-    color: var(--ig-gray-800);
-  }
-   
-  .sample {
-    overflow: auto;
-  }
-  .content {
-    display: flex;
-    justify-content: space-between;
-  }
+  margin-bottom: 5px;
+}
+
+.group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 15px;
+}
+
+.card {
+  min-height: 30px;
+  min-width: 250px;
+  max-width: 320px;
+  margin: 0 15px 15px 15px
+}
+
+igx-card-content {
+  color: var(--content-text-color);
+}
+
+.body-content {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.string {
+  text-align: center;
+  margin-top: 50px;
+  color: var(--ig-gray-800);
+}
+
+.sample {
+  overflow: auto;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+}
+
+.order-info::part(base) {
+  display: flex;
+  flex-direction: column;
+}
+
+.order-info::part(content-container) {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}