chore(*): Merge upstream master

Author: rkaraivanov

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -424,7 +424,6 @@
         grid-row: 2;
         border-bottom: 1px dotted igx-color($palette, 'grays', 400);
         z-index: 2;
-        display: table;
 
         %grid__group-indentation {
             &::after {

projects/igniteui-angular/src/lib/grid/grid.pinning.spec.ts

@@ -220,7 +220,7 @@ describe('IgxGrid - Column Pinning ', () => {
         const currentColumn = 'ProductName';
         const releasedColumn = 'Released';
 
-        grid.sort({fieldName: currentColumn, dir: SortingDirection.Asc});
+        grid.sort({ fieldName: currentColumn, dir: SortingDirection.Asc });
 
         fix.detectChanges();
 
@@ -518,6 +518,7 @@ describe('IgxGrid - Column Pinning ', () => {
         expect(grid.pinnedColumns.length).toEqual(1);
         expect(grid.unpinnedColumns.length).toEqual(9);
     });
+
     it('should allow hiding columns in the unpinned area.', () => {
 
         const fix = TestBed.createComponent(GridPinningComponent);
@@ -601,6 +602,19 @@ describe('IgxGrid - Column Pinning ', () => {
         expect(grid.columns[6].pinned).toBe(true);
         expect(grid.unpinnedWidth).toBeGreaterThanOrEqual(grid.unpinnedAreaMinWidth);
     });
+
+    it('should not have grid layout row with width that extends pass the container\'s one', () => {
+        const fix = TestBed.createComponent(GridPinningComponent);
+        fix.detectChanges();
+        const grid = fix.componentInstance.instance;
+
+        grid.getColumnByName('Phone').pinned = true;
+        fix.detectChanges();
+
+        const gridChildren = Array.prototype.slice.call(grid.nativeElement.children);
+        const gridWidth = grid.nativeElement.getBoundingClientRect().width;
+        gridChildren.forEach(elem => expect(elem.getBoundingClientRect().width).toEqual(gridWidth));
+    });
 });
 @Component({
     template: `