From 60cf26b259d8d8d5ce57218d9ff2d69f76794bff Mon Sep 17 00:00:00 2001
From: r-zakarya <82443831+r-zakarya@users.noreply.github.com>
Date: Wed, 22 Jul 2026 11:22:50 +0100
Subject: [PATCH] feat(pagination): keep the pager visible while scrolling

The page buttons sat at the top of the grid and scrolled away, so paging
through a long list meant scrolling back up. Sticky at the scrollport top
with an opaque background; the table header now sticks below it via
--pag-h (measured after append, so a wrapped pager still lines up).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 css/style.css | 12 +++++++++---
 js/app.js     |  7 ++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3bb2f3b..02a52e9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2676,7 +2676,7 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
     border-bottom: 1px solid var(--border);
     background: var(--bg-elev);
     user-select: none;
-    position: sticky; top: 0;
+    position: sticky; top: var(--pag-h, 0px);
     z-index: 1;
 }
 .entry-table th.is-sortable { cursor: pointer; }
@@ -2963,10 +2963,16 @@ input[type="password"]::-ms-clear {
 .entry-card.is-flash { animation: entryFlash 2.5s ease-out; }
 .entry-row.is-flash  { animation: entryFlash 2.5s ease-out; }
 
-/* Pagination footer (list + table views). */
+/* Pagination bar (all view modes). Sticky so the page buttons stay reachable
+   while scrolling a long page; z-index beats the sticky table header, which
+   is pushed down by --pag-h (measured in renderEntries). */
 .pagination {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--bg);
     display: flex; align-items: center; gap: 6px;
-    padding: 14px 12px 4px;
+    padding: 14px 12px 10px;
     flex-wrap: wrap;
     font-size: 13px;
     color: var(--text-dim);
diff --git a/js/app.js b/js/app.js
index 5817362..f1a9e2c 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2297,7 +2297,12 @@ function renderGrid() {
     const pageList = list.slice(start, start + state.pageSize);
 
     if (total > 10) {
-        grid.appendChild(renderPagination(total, totalPages));
+        const pag = renderPagination(total, totalPages);
+        grid.appendChild(pag);
+        // The table header sticks below the sticky pagination bar, not under it.
+        grid.style.setProperty('--pag-h', pag.offsetHeight + 'px');
+    } else {
+        grid.style.setProperty('--pag-h', '0px');
     }
 
     if (state.viewMode === 'table') {