Chip - fix grid gap (#14899)

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -349,7 +349,8 @@
 
     %igx-chip__item {
         display: grid;
-        grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
+        grid-auto-flow: column;
+        grid-auto-columns: auto;
         align-items: center;
         justify-content: center;
         text-align: center;
@@ -710,7 +711,6 @@
     %igx-chip__content {
         @include ellipsis();
 
-        grid-column: 2 / 3;
         max-width: $chip-max-width;
 
         &:empty {
@@ -853,6 +853,12 @@
                 }
             }
         }
+
+        %igx-chip__end {
+            &:has(%igx-chip__remove:only-child) {
+                display: none;
+            }
+        }
     }
 }
 

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

@@ -566,7 +566,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(grid.columnList.get(0).width).toBe('25%');
             grid.columnList.get(0).autosize();
             fixture.detectChanges();
-            expect(grid.columnList.get(0).width).toBe('32.5%');
+            expect(grid.columnList.get(0).width).toBe('31%');
         }));
 
         it('should autosize column with % width on double click.', fakeAsync(() => {
@@ -578,7 +578,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             UIInteractions.simulateMouseEvent('dblclick', headerResArea, 0, 0);
             tick(200);
             fixture.detectChanges();
-            expect(grid.columnList.get(0).width).toBe('32.5%');
+            expect(grid.columnList.get(0).width).toBe('31%');
         }));
     });