From 58087837f4e959084767cd60b4aa6653ee73114a Mon Sep 17 00:00:00 2001 From: Yorick de Wid Date: Mon, 27 Jul 2026 10:13:24 +0000 Subject: [PATCH] tweak(explorer): 20 rows a page instead of 50 Fifty rows is two screens of scrolling before you reach Volgende, on a list people work through by looking rather than by reading. Twenty is about what the viewport holds at a 34-38px row, so paging replaces the scrollbar instead of coming after it. Herstel follows the same number: it is the same table doing the same job, and the two lists disagreeing about how long a page is would be a detail you notice only by being wrong about it. Werkbank's LANE_FETCH stays at 50 -- that is a lane ceiling behind a "50+" label, not a page. Co-Authored-By: Claude Opus 5 (1M context) --- src/services/explorer.ts | 13 +++++++++++-- src/views/RecoveryListView.vue | 3 ++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/services/explorer.ts b/src/services/explorer.ts index 8622ef6..4efb288 100644 --- a/src/services/explorer.ts +++ b/src/services/explorer.ts @@ -34,8 +34,17 @@ export interface ExplorerQuery { page: number } -/** How many rows a page of the explorer holds. */ -export const PAGE_SIZE = 50 +/** + * How many rows a page of the explorer holds. + * + * Twenty, not fifty: at 34–38px a row, twenty is about what a desktop viewport + * shows without scrolling, so Volgende replaces the scrollbar instead of coming + * after it. It also costs the client-side type filter less — that one narrows + * the page rather than the query, and a smaller page is a smaller thing to + * narrow, so `filterByType` leans harder on the caveat the popover already + * states. + */ +export const PAGE_SIZE = 20 export function emptyQuery(): ExplorerQuery { return { q: '', status: [], type: [], mine: null, sort: null, order: 'desc', page: 1 } diff --git a/src/views/RecoveryListView.vue b/src/views/RecoveryListView.vue index 5074d0c..c15eb9e 100644 --- a/src/views/RecoveryListView.vue +++ b/src/views/RecoveryListView.vue @@ -30,7 +30,8 @@ import { useRowKeyboard } from '@/services/useRowKeyboard' */ const router = useRouter() -const PAGE_SIZE = 50 +/** Same page as the explorer — see `PAGE_SIZE` in `services/explorer.ts`. */ +const PAGE_SIZE = 20 const rows: Ref = ref([]) const loading = ref(true)