style(grid): add responsive styles for filter and pagination

Author: gheorghitahurmuz

projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss

@@ -34,9 +34,11 @@ ui-grid-custom-paginator {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        flex-wrap: wrap;
         padding: $mat-paginator-padding;
-        flex-wrap: wrap-reverse;
         width: 100%;
+
+        container: footerContainer / inline-size;
     }
 
     .mat-mdc-paginator-page-size {
@@ -90,3 +92,20 @@ ui-grid-custom-paginator {
         }
     }
 }
+@container footerContainer (max-width: 600px) {
+    ui-grid-custom-paginator  {
+        .mat-mdc-paginator-range-label {
+            order: 2;
+        }
+
+        .mat-mdc-paginator-range-actions {
+            order: 1;
+            inline-size: 100%;
+            justify-content: center;
+        }
+
+        .mat-mdc-paginator-page-size {
+            order: 3;
+        }
+    }
+}

projects/angular/components/ui-grid/src/ui-grid.component.scss

@@ -150,6 +150,10 @@ ui-grid {
             flex-wrap: wrap;
             align-items: flex-start;
 
+
+            container: filterContainer / inline-size;
+            width: 100%;
+
             &-lhs-group {
                 display: flex;
                 flex-direction: column;
@@ -776,3 +780,24 @@ ui-grid {
         }
     }
 }
+
+@container filterContainer (max-inline-size: 500px) {
+    $column-filter-inline-size: 94px;
+    .ui-grid-search {
+        inline-size: calc(100% - $column-filter-inline-size) !important;
+    }
+
+    .ui-grid-filter-container .mat-mdc-form-field {
+        inline-size: 100% !important;
+    }
+
+    .ui-grid-toggle-columns .mdc-button__label{
+        display: none;
+    }
+
+    .ui-grid-filter-container-lhs-group-actions {
+        .mat-divider {
+            display: none;
+        }
+    }
+}