feat(data-table): Make rows per page wrap in new line when overflows

PiperOrigin-RevId: 317730933

Author: abhiomkar

packages/mdc-data-table/_data-table-pagination.scss

@@ -32,6 +32,15 @@
 
       align-items: center;
       display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+  }
+
+  .mdc-data-table__pagination-navigation {
+    @include feature-targeting.targets($feat-structure) {
+      align-items: center;
+      display: flex;
     }
   }
 
@@ -44,15 +53,19 @@
 
   .mdc-data-table__pagination-total {
     @include feature-targeting.targets($feat-structure) {
-      @include rtl.reflexive-box(margin, right, 36px);
+      @include rtl.reflexive-property(
+        margin,
+        $left-value: 14px,
+        $right-value: 36px
+      );
 
       white-space: nowrap;
     }
   }
 
   .mdc-data-table__pagination-rows-per-page {
     @include feature-targeting.targets($feat-structure) {
-      @include rtl.reflexive-box(margin, right, 36px);
+      @include rtl.reflexive-box(margin, right, 22px);
 
       align-items: center;
       display: inline-flex;
@@ -71,6 +84,10 @@
     @include select-theme.min-width(80px, $query: $query);
     @include menu-theme.min-width(80px, $query: $query);
 
+    @include feature-targeting.targets($feat-structure) {
+      margin: 8px 0;
+    }
+
     // TODO(b/158196144): Set it to `-5` density scale using density mixin when
     // select component supports it.
     @include select-theme.outlined-height(

packages/mdc-data-table/_data-table-theme.scss

@@ -284,12 +284,17 @@ $pagination-rows-per-page-select-height: 36px;
 @mixin cell-height($height, $query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
-  .mdc-data-table__cell,
-  .mdc-data-table__pagination {
+  .mdc-data-table__cell {
     @include feature-targeting-mixins.targets($feat-structure) {
       height: $height;
     }
   }
+
+  .mdc-data-table__pagination {
+    @include feature-targeting-mixins.targets($feat-structure) {
+      min-height: $height;
+    }
+  }
 }
 
 @mixin cell-padding(