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 = ({ 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 = ({ ); } - if (startPage > 1 && lastPage > 10) { + if (startPage > 1 && lastPage > 5) { items.push( = ({
{/* Select total viewable records */} - + )} {/* Go to specific page */}
diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss index 4f9bd1e33..558a39c46 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; }