feat(table): restyle paginator with compact design and improved layout

angular.json

@@ -61,7 +61,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "8kb",
-                  "maximumError": "10kb"
+                  "maximumError": "20kb"
                 }
               ],
               "fileReplacements": [

src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html

@@ -51,6 +51,7 @@
   </div>
   <div class="paginator-container" [class.is-loading]="pagination?.isLoading">
     <mat-paginator
+      class="datasets-paginator datasets-header-paginator"
       [pageSizeOptions]="pagination.pageSizeOptions"
       [pageIndex]="pagination.pageIndex"
       [length]="pagination.length"
@@ -470,6 +471,7 @@
 </div>
 <div class="paginator-container" [class.is-loading]="pagination?.isLoading">
   <mat-paginator
+    class="datasets-paginator datasets-footer-paginator"
     [pageSizeOptions]="pagination.pageSizeOptions"
     [pageIndex]="pagination.pageIndex"
     [length]="pagination.length"

src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss

@@ -419,17 +419,78 @@ cdk-virtual-scroll-viewport {
     }
   }
 
-  mat-paginator {
-    flex: 1 1 auto;
-    white-space: nowrap;
-    min-width: fit-content;
+}
+
+
+// Root level paginator container (bottom of table)
+mat-paginator {
+  //flex: 1 1 auto;
+  white-space: nowrap;
+  //min-width: fit-content;
+}
+
+::ng-deep mat-paginator.mat-mdc-paginator {
+  border: 1px solid var(--theme-hover-lighter);
+  border-radius: 24px;
+  margin-right: 10px;
+  margin-bottom: 5px;
+
+  /* Target the paginator's form field */
+  mat-form-field.mat-mdc-form-field.mat-mdc-paginator-page-size-select {
+    height: 30px !important;
+    /* Your desired height */
+    min-height: 30px !important;
   }
 
-  .paginator-container {
-    display: flex;
-    flex: 1;
+  /* Align the label vertically */
+  .mat-mdc-paginator-page-size-label {
+    line-height: 30px;
+    /* Match the form field height */
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  /* Align the select value text vertically */
+  .mat-mdc-select-value-text {
+    line-height: 30px;
+    /* Match the form field height */
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .mat-mdc-select-value {
+    line-height: 30px !important;
+    /* Match the form field height */
+  }
+
+  /* Ensure the select trigger fills the height */
+  .mat-mdc-select-trigger {
+    height: 100%;
+  }
+
+  /* Adjust the text field wrapper height */
+  .mat-mdc-text-field-wrapper {
+    height: 100%;
+    min-height: 100% !important;
+  }
+
+  /* Remove extra padding from the form field infix */
+  .mat-mdc-form-field-infix {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
   }
 }
+
+.paginator-container {
+  display: flex;
+  flex: 1;
+  height: 48px;
+  //border: 1px solid var(--theme-hover-lighter);
+  //border-radius: 24px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .paginator-container.is-loading {
   ::ng-deep .mat-mdc-paginator-range-label {
     position: relative;
@@ -450,6 +511,38 @@ cdk-virtual-scroll-viewport {
   }
 }
 
+// Paginator element reordering
+// Reorder: Items per page -> Previous -> Page info -> Next
+::ng-deep .paginator-container mat-paginator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .mat-mdc-paginator-page-size {
+    order: 1;
+    margin-right: auto;
+  }
+
+  .mat-mdc-paginator-range-actions {
+    order: 1;
+  }
+
+  .mat-mdc-paginator-navigation-previous,
+  .mat-mdc-paginator-navigation-first {
+    order: 1;
+  }
+
+  .mat-mdc-paginator-range-label {
+    order: 2;
+    margin: 0;
+  }
+
+  .mat-mdc-paginator-navigation-next,
+  .mat-mdc-paginator-navigation-last {
+    order: 3;
+  }
+}
+
 @keyframes paginator-range-spin {
   from {
     transform: translate(-50%, -50%) rotate(0deg);