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)