fix(filtering): Adding styles to handle viewport size below 432px

Author: MPopov

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

@@ -558,6 +558,10 @@
         @extend %igx-grid__filtering-row-buttons !optional;
     }
 
+    @include e(filtering-row-editing-buttons) {
+        @extend %igx-grid__filtering-row-editing-buttons !optional;
+    }
+
     @include e(filtering-row-main) {
         @extend %igx-grid__filtering-row-main !optional;
     }

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

@@ -703,6 +703,8 @@
         indigo-design: 600,
     ), $variant);
 
+    $mobile-view: rem(432px);
+
     %grid-display {
         position: relative;
         display: grid;
@@ -2374,7 +2376,9 @@
         }
 
         igx-input-group {
-            flex: 0 0 200px;
+            width: 100%;
+            max-width: rem(200px);
+            min-width: rem(100px);
         }
 
         igx-prefix:focus {
@@ -2409,6 +2413,7 @@
         flex: 1;
         overflow: hidden;
         max-width: calc(100% - 176px);
+        min-width: rem(56px);
 
         igx-chips-area {
             transition: transform .25s $ease-out-back;
@@ -2640,4 +2645,29 @@
 
     @include _excel-filtering($theme, $palette);
     @include _advanced-filtering($theme, $palette);
+
+
+    %igx-grid__filtering-row-editing-buttons {
+        display: flex;
+        align-items: center;
+
+        [igxButton='icon'] {
+            display: none;
+        }
+
+        @media only screen and (max-width: $mobile-view) {
+            [igxButton] {
+                display: none;
+            }
+
+            [igxButton='icon'] {
+                display: flex;
+
+                &:not([disabled]) {
+                    color: --var($theme, 'sorted-header-icon-color');
+                }
+            }
+        }
+    }
 }
+

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -124,4 +124,12 @@
 <div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
     <button igxButton igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">{{filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</button>
     <button #closeButton igxButton igxRipple (click)="close()">{{filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</button>
+
+    <!-- Visible only under 432px viewport  -->
+    <button igxButton="icon" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
+        <igx-icon>refresh</igx-icon>
+    </button>
+    <button #closeButton igxButton="icon" igxRipple (click)="close()">
+        <igx-icon>close</igx-icon>
+    </button>
 </div>