fix input prefix/suffix overlying the grid cell focus styles (#12470)

* refactor(grid): fix input prefix/suffix overlying the grid cell focused state

Co-authored-by: Simeon Simeonoff <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 3 people

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

@@ -1476,17 +1476,26 @@
     }
 
     %igx-grid__td--editing {
+        $editing-outline-width: rem(2px);
         background: var-get($theme, 'cell-editing-background') !important;
-        box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'edit-mode-color');
+        box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
         padding: 0 !important;
 
         // Have a more stable visual editing experience
         igx-input-group,
         igx-select,
         igx-date-picker,
         igx-time-picker {
-            width: 100%;
-            height: 100%;
+            height: calc(100% - (#{$editing-outline-width} * 2));
+            width: calc(100% - (#{$editing-outline-width} * 2));
+            margin-inline-start: $editing-outline-width;
+            overflow: hidden;
+
+            igx-input-group {
+                width: calc(100% - #{$editing-outline-width}) !important;
+                margin-inline-start: 0;
+                height: 100% !important;
+            }
         }
 
         igx-input-group {
@@ -1495,11 +1504,17 @@
         }
 
         .igx-input-group__bundle {
+            height: 100% !important;
+            min-height: 100% !important;
             border: none !important;
 
             &::before {
                 content: none !important;
             }
+
+            &::after {
+                display: none;
+            }
         }
 
         &.igx-grid__td--invalid {
@@ -1509,6 +1524,7 @@
 
         igx-prefix,
         igx-suffix {
+            border-radius: 0 !important;
             padding-top: 0 !important;
             padding-bottom: 0 !important;
         }
@@ -1535,6 +1551,10 @@
             font-size: $grid-cell-fs !important;
             line-height: $grid-cell-lh !important;
         }
+
+        &%grid-cell-number {
+            justify-content: flex-start !important;
+        }
     }
 
     %grid-cell--pinned {