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>
This commit is contained in:
r-zakarya
2026-07-22 11:22:50 +01:00
parent a1e028bfc5
commit 60cf26b259
2 changed files with 15 additions and 4 deletions
+9 -3
View File
@@ -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);