fix(igxGrid): Adjust expandable cell styles.

Author: MKirova

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

@@ -1514,6 +1514,9 @@
     }
 
     %igx-grid__td--bool {
+        display: flex;
+        flex-grow: 1;
+
         igx-icon {
             --component-size: #{if($variant == 'indigo', 2, 1)};
         }
@@ -2084,7 +2087,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-	        
+
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2112,15 +2115,15 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
-	                
+
 	                > igx-icon {
 		                color: inherit;
 	                }
@@ -2177,14 +2180,14 @@
         .sort-icon {
             opacity: 1;
             color: var-get($theme, 'sorted-header-icon-color');
-	        
+
 	        > igx-icon {
 		        color: inherit;
 	        }
 
             &:hover {
                 color: var-get($theme, 'sortable-header-icon-hover-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
@@ -2220,6 +2223,7 @@
     %grid-cell-number {
         text-align: $grid-cell-align-num;
         justify-content: flex-end;
+        flex-grow: 1;
 
         %grid-cell-header-icons {
             justify-content: flex-start;

projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html

@@ -8,6 +8,7 @@
         <div
             igxTextHighlight class="igx-grid__td-text"
             [cssClass]="highlightClass"
+            [class.igx-grid__td--number]="column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'"
             [activeCssClass]="activeHighlightClass"
             [groupName]="gridID"
             [value]="formatter ? (value | columnFormatter:formatter:rowData)
@@ -32,11 +33,13 @@
     }
 
     @if (column.dataType === 'boolean' && !this.formatter) {
+    <div [class.igx-grid__td--bool]="column.dataType === 'boolean'">
         <igx-icon
             family="default"
             [name]="value ? 'confirm' : 'close'"
             [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }">
         </igx-icon>
+    </div>
     }
     @if (column.dataType === 'image') {
         <img [src]="value" [alt]="value | igxCellImageAlt" />