fix(ui): render smaller pagination range on mobile

This often overflows on mobile, render only 3 page links there

ui/src/Components/Pagination/index.js

@@ -11,6 +11,8 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft";
 import { faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons/faAngleDoubleRight";
 
+import { IsMobile } from "Common/Device";
+
 class PageSelect extends Component {
   static propTypes = {
     totalPages: PropTypes.number.isRequired,
@@ -48,6 +50,8 @@ class PageSelect extends Component {
       setPageCallback,
     } = this.props;
 
+    const isMobile = IsMobile();
+
     return (
       <HotKeys
         className="components-pagination"
@@ -67,7 +71,7 @@ class PageSelect extends Component {
               activePage={activePage}
               itemsCountPerPage={maxPerPage}
               totalItemsCount={totalItemsCount}
-              pageRangeDisplayed={5}
+              pageRangeDisplayed={isMobile ? 3 : 5}
               onChange={setPageCallback}
               hideFirstLastPages={totalPages < 10}
               innerClass="pagination justify-content-center"

ui/src/Components/Pagination/index.test.js

@@ -5,6 +5,20 @@ import { mount } from "enzyme";
 import { PressKey } from "__mocks__/KeyPress";
 import { PageSelect } from ".";
 
+let originalInnerWidth;
+
+beforeAll(() => {
+  originalInnerWidth = global.innerWidth;
+});
+
+beforeEach(() => {
+  global.innerWidth = originalInnerWidth;
+});
+
+afterEach(() => {
+  global.innerWidth = originalInnerWidth;
+});
+
 describe("<PageSelect />", () => {
   it("calls setPageCallback on arrow key press", () => {
     const setPageCallback = jest.fn();
@@ -48,4 +62,32 @@ describe("<PageSelect />", () => {
     PressKey(tree, "ArrowLeft", 37);
     expect(setPageCallback).toHaveBeenLastCalledWith(1);
   });
+
+  it("renders 5 page range on desktop", () => {
+    global.innerWidth = 1024;
+    const tree = mount(
+      <PageSelect
+        totalPages={7}
+        activePage={1}
+        maxPerPage={5}
+        totalItemsCount={35}
+        setPageCallback={jest.fn()}
+      />
+    );
+    expect(tree.find(".page-link")).toHaveLength(7);
+  });
+
+  it("renders 3 page range on mobile", () => {
+    global.innerWidth = 760;
+    const tree = mount(
+      <PageSelect
+        totalPages={7}
+        activePage={1}
+        maxPerPage={5}
+        totalItemsCount={35}
+        setPageCallback={jest.fn()}
+      />
+    );
+    expect(tree.find(".page-link")).toHaveLength(5);
+  });
 });