From 1fbb9d8c0d3a8ecc01e368baeb298566bf312d98 Mon Sep 17 00:00:00 2001
From: afwilcox <alecwilcox@gmail.com>
Date: Fri, 19 Jul 2024 11:38:48 -0700
Subject: [PATCH] feat: support pagination on ipad

---
 .../common/complaint-pagination.tsx           | 23 +++++++++++--------
 frontend/src/assets/sass/layout.scss          |  2 +-
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/components/common/complaint-pagination.tsx b/frontend/src/app/components/common/complaint-pagination.tsx
index 0bce2b301..16024ec51 100644
--- a/frontend/src/app/components/common/complaint-pagination.tsx
+++ b/frontend/src/app/components/common/complaint-pagination.tsx
@@ -3,6 +3,7 @@ import { Form } from "react-bootstrap";
 import Select from "react-select";
 import Pagination from "react-bootstrap/Pagination";
 import Option from "../../types/app/option";
+import config from "../../../config";
 
 interface ComplaintPaginationProps {
   currentPage: number;
@@ -54,8 +55,8 @@ const ComplaintPagination: React.FC<ComplaintPaginationProps> = ({
     const items = [];
 
     // Calculate the range of pages to display based on the current page
-    const startPage = Math.max(1, lastPage > 10 ? currentPage - 4 : 1);
-    const endPage = Math.min(lastPage, startPage + 9);
+    const startPage = Math.max(1, lastPage > 5 ? currentPage - 4 : 1);
+    const endPage = Math.min(lastPage, startPage + 5);
 
     // Render the ellipsis if necessary
     if (startPage > 1) {
@@ -70,7 +71,7 @@ const ComplaintPagination: React.FC<ComplaintPaginationProps> = ({
       );
     }
 
-    if (startPage > 1 && lastPage > 10) {
+    if (startPage > 1 && lastPage > 5) {
       items.push(
         <Pagination.Ellipsis
           key="ellipsis-start"
@@ -141,13 +142,15 @@ const ComplaintPagination: React.FC<ComplaintPaginationProps> = ({
 
           <div className="pagination_controls_end">
             {/* Select total viewable records */}
-            <Select
-              menuPlacement="top"
-              id="resultsPerPageSelect"
-              options={pageSizeOptions}
-              classNamePrefix="comp-select"
-              defaultValue={defaultOption}
-            />
+            {config.SHOW_EXPERIMENTAL_FEATURES === "true" && (
+              <Select
+                menuPlacement="top"
+                id="resultsPerPageSelect"
+                options={pageSizeOptions}
+                classNamePrefix="comp-select"
+                defaultValue={defaultOption}
+              />
+            )}
 
             {/* Go to specific page */}
             <div className="pagination_specific_page">
diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss
index 3262a1f21..f472d6906 100644
--- a/frontend/src/assets/sass/layout.scss
+++ b/frontend/src/assets/sass/layout.scss
@@ -551,7 +551,7 @@ button.modal-buttons {
   height: 38px;
 }
 
-@include media-breakpoint-down(xl) {
+@include media-breakpoint-down(lg) {
   .page-item:not(:first-of-type):not(:last-of-type):not(.active) {
     display: none;
   }