Puts all buttons on same line

app/assets/stylesheets/application.scss

@@ -14,6 +14,7 @@
 
 @use "shared/notifier";
 @use "shared/dashboard";
+@use "shared/data_tables_overide";
 @use "shared/flashes";
 @use "shared/footer";
 @use "shared/form";

app/assets/stylesheets/shared/data_tables_overide.scss

@@ -0,0 +1,11 @@
+/**
+  Needed to display the prev, next, number, and ellipsis buttons on the same line. This causes issues on mobile with
+  lots of pages, but there is no current way to change the number of pages in a view or in JS based on window size.
+ */
+.dataTables_paginate {
+  white-space: nowrap !important;
+
+  span {
+    display: inline-block !important;
+  }
+}

app/assets/stylesheets/shared/layout.scss

@@ -114,51 +114,3 @@ div.row.volunteer-filters {
     }
   }
 }
-
-
-
-@media only screen and (max-width: 2560px) {
-
-  #casa-cases_paginate.dataTables_paginate.paging_simple_numbers {
-    position: absolute;
-    right: 0.3%;
-    span.ellipsis {
-      position: absolute;
-      right: 10.5%;
-      bottom: 12%;
-    }
-  }
-
-  #casa-cases_next.paginate_button.next,
-  #volunteers_next.paginate_button.next
-  {
-    position: absolute;
-    bottom: 48%;
-    right: 0.4%;
-  }
-
-  #volunteers_previous.paginate_button.previous,
-  #casa-cases_previous.paginate_button.previous{
-    margin-right: 100px;
-  }
-
-  #volunteers_paginate.dataTables_paginate.paging_simple_numbers {
-    position: absolute;
-    right: 0.3%;
-    margin-top: 15px;
-    span.ellipsis {
-      position: absolute;
-      right: 10%;
-      bottom: 12%;
-    }
-  }
-
-}
-
-@media only screen and (min-width: 768px) and (max-width: 992px) {
-
-  .dataTables_wrapper .dataTables_info {
-    width: 50%;
-  }
-
-}