From 115bd701e1e3e0c177e1834f2eedeba522226501 Mon Sep 17 00:00:00 2001
From: Jayme Klein <jayme.silva@winddigital.com.br>
Date: Fri, 17 Jul 2026 14:56:23 -0300
Subject: [PATCH] feat(ui): keep pagination controls visible while scrolling a
 listing

Pin the pager to the bottom of the viewport on the Documents and Ingestion
Queue pages via a new sticky prop, so paging a long list no longer requires
scrolling to the end to reach Prev/Next. The bar spans the page gutter and is
opaque so rows never show beside or through it; the existing empty-listing
guard keeps a zero-result page from rendering an empty bar.
---
 ui/src/components/Pager.tsx     | 17 +++++++++++++++--
 ui/src/pages/Documents.tsx      |  9 ++++++++-
 ui/src/pages/IngestionQueue.tsx |  9 ++++++++-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/Pager.tsx b/ui/src/components/Pager.tsx
index a82181b..cb37343 100644
--- a/ui/src/components/Pager.tsx
+++ b/ui/src/components/Pager.tsx
@@ -1,26 +1,39 @@
+import { cn } from '../lib/cn'
 import { Button } from './ui'
 
 /** Offset pager: "showing X–Y of N" + Prev/Next, bounded to the available pages. Shared by the
- *  documents listing and the ingestion queue. Renders nothing when there is nothing to page. */
+ *  documents listing and the ingestion queue. Renders nothing when there is nothing to page —
+ *  which is also what keeps a `sticky` pager from leaving an empty bar on an empty listing. */
 export function Pager({
   page,
   pageSize,
   total,
   onPage,
   loading,
+  sticky = false,
 }: {
   page: number
   pageSize: number
   total: number
   onPage: (p: number) => void
   loading: boolean
+  /** Pin to the bottom of the scroll area, so paging a long listing never means scrolling to the
+   *  end of it first. Assumes the page gutter both callers share (see the class note below). */
+  sticky?: boolean
 }) {
   if (total === 0) return null
   const start = page * pageSize + 1
   const end = Math.min((page + 1) * pageSize, total)
   const lastPage = Math.max(0, Math.ceil(total / pageSize) - 1)
   return (
-    <div className="flex items-center justify-between text-[13px] text-ink-muted">
+    <div
+      className={cn(
+        'flex items-center justify-between text-[13px] text-ink-muted',
+        // -mx-8/px-8 span the page's px-8 gutter so rows can't show beside the bar, and the
+        // background is opaque so they can't show through it.
+        sticky && 'sticky bottom-0 z-10 -mx-8 border-t border-border bg-canvas px-8 py-3',
+      )}
+    >
       <span>
         Showing{' '}
         <span className="tabular-nums text-ink">
diff --git a/ui/src/pages/Documents.tsx b/ui/src/pages/Documents.tsx
index 0842a33..9fd5210 100644
--- a/ui/src/pages/Documents.tsx
+++ b/ui/src/pages/Documents.tsx
@@ -209,7 +209,14 @@ export default function Documents() {
         onDelete={setDeleteTarget}
       />
 
-      <Pager page={page} pageSize={PAGE_SIZE} total={total} onPage={setPage} loading={isLoading} />
+      <Pager
+        page={page}
+        pageSize={PAGE_SIZE}
+        total={total}
+        onPage={setPage}
+        loading={isLoading}
+        sticky
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}
diff --git a/ui/src/pages/IngestionQueue.tsx b/ui/src/pages/IngestionQueue.tsx
index ed46569..ef669a7 100644
--- a/ui/src/pages/IngestionQueue.tsx
+++ b/ui/src/pages/IngestionQueue.tsx
@@ -118,7 +118,14 @@ export default function IngestionQueue() {
         message={error?.message}
         onRetry={() => void refetch()}
       />
-      <Pager page={page} pageSize={PAGE_SIZE} total={total} onPage={setPage} loading={isLoading} />
+      <Pager
+        page={page}
+        pageSize={PAGE_SIZE}
+        total={total}
+        onPage={setPage}
+        loading={isLoading}
+        sticky
+      />
 
       <ConfirmDialog
         open={confirmRetry}