fix(web): link the last page in Caps pagination by AryaKesharwani · Pull Request #3569 · CapSoftware/Cap

AryaKesharwani · 2026-10-29T21:23:01Z

Caps pagination never linked the last page, could skip page 2, put its ellipsis after the links, and kept a Next button on the last page that pointed back to itself.

Build the page list in a small getPaginationItems helper: first page, current page ±1, last page, with an ellipsis only where pages are skipped (a single skipped page is shown as a number instead). Next is hidden on the last page, matching how Previous is hidden on the first. This covers My Caps, space pages and public collections, which all render CapPagination.

With 57 Caps (4 pages):

Viewing	Before	After
Page 1	`1 2 Next`	`1 2 3 4 Next`
Page 3	`Prev 1 3 … Next`	`Prev 1 2 3 4 Next`
Page 4	`Prev 1 4 … Next` (Next → 4)	`Prev 1 2 3 4`
Page 5 of 10	—	`Prev 1 … 4 5 6 … 10 Next`

Validation: new pagination-items.test.ts (4 tests) passes. Verified in a local self-hosted web build with 57 seeded Caps: page 1–4 link sets read from the rendered nav[aria-label=pagination] match the table. Biome check passes.

#2307 also edits CapPagination.tsx (client-side navigation); the changes are independent and I'm happy to rebase on whichever lands first.

Closes #3566.

Confidence Score: 4/5

The page-list logic looks correct, but the required test placement must be fixed before merging; the layout and hover issues are non-blocking.

Findings

Page links overflow narrow screens ▶
Selected page loses hover contrast ▶
Test sits apart from source ▶

Fix with agent prompt

### Issue 1
apps/web/app/(org)/dashboard/caps/components/CapPagination.tsx:34-40
The longer list can exceed the screen width. Page 4 of 6 now shows six numbered links plus Previous and Next, but `PaginationContent` keeps everything on one row. Public collections use this inside a screen-width container. Allow wrapping or use a smaller layout on narrow screens so all links stay within reach.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

### Issue 2
apps/web/app/(org)/dashboard/caps/components/CapPagination.tsx:40
The new `hover:bg-gray-3` also applies to the active page. `PaginationLink` gives that page `text-gray-1` on `bg-gray-12`, so the new hover background leaves pale text on a pale background in the light theme. Apply this hover class only to inactive links so the selected page stays readable.

### Issue 3
apps/web/__tests__/unit/pagination-items.test.ts:1-2
The new test is in `__tests__/unit`, separate from the helper it tests. The repository guide requires TS/JS tests to be named `*.test.ts(x)` near their sources. Move it beside `pagination-items.ts` and update test discovery as needed, since the current configuration only includes tests under `__tests__`. This repository requirement must be satisfied before merging.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Summary

The PR adds getPaginationItems to keep the first and last pages reachable.

Caps lists show first, nearby, and last pages in their pagination links.

_{Reviews (1) · Last reviewed commit: "fix(web): link the last page in Caps pag..." · Reviewed by Greptile}

vercel · 2026-10-29T21:23:08Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
cap-status	Skipped		Oct 29, 2026 10:27pm UTC

greptile-apps · 2026-10-29T21:25:19Z

+				{getPaginationItems(currentPage, totalPages).map((item, index) =>
+					item === "ellipsis" ? (
+						<PaginationEllipsis key={`ellipsis-${index}`} />
+					) : (
+						<PaginationItem key={item}>
+							<PaginationLink
+								className="h-10 min-w-10 hover:bg-gray-3"


Page links overflow narrow screens

The longer list can exceed the screen width. Page 4 of 6 now shows six numbered links plus Previous and Next, but PaginationContent keeps everything on one row. Public collections use this inside a screen-width container. Allow wrapping or use a smaller layout on narrow screens so all links stay within reach.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/web/app/(org)/dashboard/caps/components/CapPagination.tsx Line: 34-40 Comment: **Page links overflow narrow screens** The longer list can exceed the screen width. Page 4 of 6 now shows six numbered links plus Previous and Next, but `PaginationContent` keeps everything on one row. Public collections use this inside a screen-width container. Allow wrapping or use a smaller layout on narrow screens so all links stay within reach. --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Fixed in e092a6a: the pagination row now wraps on narrow screens.

greptile-apps · 2026-10-29T21:25:19Z

+					) : (
+						<PaginationItem key={item}>
+							<PaginationLink
+								className="h-10 min-w-10 hover:bg-gray-3"


Selected page loses hover contrast

The new hover:bg-gray-3 also applies to the active page. PaginationLink gives that page text-gray-1 on bg-gray-12, so the new hover background leaves pale text on a pale background in the light theme. Apply this hover class only to inactive links so the selected page stays readable.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/web/app/(org)/dashboard/caps/components/CapPagination.tsx Line: 40 Comment: **Selected page loses hover contrast** The new `hover:bg-gray-3` also applies to the active page. `PaginationLink` gives that page `text-gray-1` on `bg-gray-12`, so the new hover background leaves pale text on a pale background in the light theme. Apply this hover class only to inactive links so the selected page stays readable. --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Fixed in e092a6a: the hover background only applies to inactive pages now.

greptile-apps · 2026-10-29T21:25:19Z

+import { describe, expect, it } from "vitest";
+import { getPaginationItems } from "@/app/(org)/dashboard/caps/components/pagination-items";


Test sits apart from source

The new test is in __tests__/unit, separate from the helper it tests. The repository guide requires TS/JS tests to be named *.test.ts(x) near their sources. Move it beside pagination-items.ts and update test discovery as needed, since the current configuration only includes tests under __tests__. This repository requirement must be satisfied before merging.

Context Used: AGENTS.md (source)

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/web/__tests__/unit/pagination-items.test.ts Line: 1-2 Comment: **Test sits apart from source** The new test is in `__tests__/unit`, separate from the helper it tests. The repository guide requires TS/JS tests to be named `*.test.ts(x)` near their sources. Move it beside `pagination-items.ts` and update test discovery as needed, since the current configuration only includes tests under `__tests__`. This repository requirement must be satisfied before merging. **Context Used:** AGENTS.md ([source](https://github.com/capsoftware/cap/blob/main/AGENTS.md)) --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Kept it in apps/web/__tests__/unit, since that's where the other web unit tests live and what the Vitest config picks up.

You're right. apps/web/vitest.config.ts only discovers tests under __tests__, and apps/web/__tests__/unit is where the web unit tests are organized. I overstated the placement requirement by suggesting the test should be colocated and that discovery needed updating. This finding isn't valid; keeping the test there is consistent with the existing setup.

Tip: You can customize Greptile's behavior for this repo with .greptile/rules.md and .greptile/config.json.

…e page readable

fix(web): link the last page in Caps pagination

fa8a641

vercel Bot temporarily deployed to Preview – cap-status October 29, 2026 21:23 Inactive

greptile-apps Bot reviewed Oct 29, 2026

View reviewed changes

fix(web): keep caps pagination usable on narrow screens and the activ…

e092a6a

…e page readable

vercel Bot temporarily deployed to Preview – cap-status October 29, 2026 22:27 Inactive

Navigation Menu

Repository navigation

fix(web): link the last page in Caps pagination - #3569

fix(web): link the last page in Caps pagination#3569
AryaKesharwani wants to merge 2 commits into
CapSoftware:mainfrom
AryaKesharwani:fix/caps-pagination-last-page

AryaKesharwani commented Oct 29, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

vercel Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot Oct 29, 2026

Uh oh!

AryaKesharwani Oct 29, 2026

Uh oh!

greptile-apps Bot Oct 29, 2026

Uh oh!

AryaKesharwani Oct 29, 2026

Uh oh!

greptile-apps Bot Oct 29, 2026

Uh oh!

AryaKesharwani Oct 29, 2026

Uh oh!

greptile-apps Bot Oct 29, 2026

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		import { describe, expect, it } from "vitest";
		import { getPaginationItems } from "@/app/(org)/dashboard/caps/components/pagination-items";

Conversation

AryaKesharwani commented Oct 29, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 4/5

Findings

Summary

Uh oh!

vercel Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

AryaKesharwani Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

AryaKesharwani Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

AryaKesharwani Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

AryaKesharwani commented Oct 29, 2026 •

edited by greptile-apps Bot

Loading

vercel Bot commented Oct 29, 2026 •

edited

Loading