From f2a787a2bab8cc64c874f59f8cef94afcffb508a Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Thu, 6 Nov 2025 10:45:57 +1100
Subject: [PATCH] Add (hidden) pagination to list results header (#6234)

---
 .../src/components/List/ListResultsHeader.tsx |  8 +++++++-
 ui/v2.5/src/components/List/styles.scss       | 20 +++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/v2.5/src/components/List/ListResultsHeader.tsx b/ui/v2.5/src/components/List/ListResultsHeader.tsx
index a2583c2e1..8a1bba05e 100644
--- a/ui/v2.5/src/components/List/ListResultsHeader.tsx
+++ b/ui/v2.5/src/components/List/ListResultsHeader.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { ListFilterModel } from "src/models/list-filter/filter";
-import { PaginationIndex } from "../List/Pagination";
+import { Pagination, PaginationIndex } from "../List/Pagination";
 import { ButtonToolbar } from "react-bootstrap";
 import { ListViewOptions } from "../List/ListViewOptions";
 import { PageSizeSelector, SortBySelect } from "../List/ListFilter";
@@ -53,6 +53,12 @@ export const ListResultsHeader: React.FC<{
         />
       </div>
       <div className="pagination-index-container">
+        <Pagination
+          currentPage={filter.currentPage}
+          itemsPerPage={filter.itemsPerPage}
+          totalItems={totalCount}
+          onChangePage={(page) => onChangeFilter(filter.changePage(page))}
+        />
         <PaginationIndex
           loading={loading}
           itemsPerPage={filter.itemsPerPage}
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index aba1f39df..df50430a2 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -1305,7 +1305,7 @@ input[type="range"].zoom-slider {
 }
 
 .list-results-header {
-  align-items: center;
+  align-items: flex-start;
   background-color: $body-bg;
   display: flex;
 
@@ -1327,6 +1327,18 @@ input[type="range"].zoom-slider {
   }
 }
 
+.list-results-header .pagination-index-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .pagination {
+    // hidden by default. Can be shown via css override if needed
+    display: none;
+    margin: 0;
+  }
+}
+
 .list-results-header {
   gap: 0.25rem;
   margin-bottom: 0.5rem;
@@ -1342,7 +1354,7 @@ input[type="range"].zoom-slider {
     }
 
     & > div.pagination-index-container {
-      justify-content: flex-end;
+      align-items: flex-end;
       order: 3;
     }
   }
@@ -1356,6 +1368,10 @@ input[type="range"].zoom-slider {
       margin-left: auto;
       margin-right: auto;
     }
+
+    & > div.pagination-index-container {
+      align-items: center;
+    }
   }
 }