fix(monitor): compact pagination for narrow drift-panel columns

[NotYuSheng]

Problem

In the monitor IP Addresses (and Devices / Protocols) drift panels, the "Page Navigation" pager was visually broken. The shared Pagination component was built for full-width tables, but in these panels it sits in a ~250px column, where:

• "Previous" wrapped under its chevron onto a second line
• "Next" was clipped ("Nex") and spilled past the container's right edge

Root cause: directionVariant="icon-text" renders an icon and a text label per direction button, plus 5 page numbers — too much for a narrow column.

Fix

Add a compact prop to the shared Pagination component and opt the three drift panels into it:

• icon-only direction chevrons (no "Previous"/"Next" text)
• fewer page numbers (limit 3 → ‹ 1 2 3 … ›)
• stacked layout — "Showing X of Y" above the nav, tighter padding

Plus two defensive base rules (white-space: nowrap on direction buttons, flex-wrap on the number list) so no pager can overflow its container.

Full-width table usages (FileList, Conversations, Change Events, etc.) don't pass compact, so their render path is unchanged.

Verification (Playwright, against the live container)

• Both drift pagers render compact=true, clean single row, 104px tall (was 160px, broken)
• Functional navigation confirmed: clicking page 2 → "Showing 51 to 100", Next → "101 to 150", Prev → back to "51 to 100"
• Confirmed the served JS bundle actually contains the fix

Before → After

Before	"Previous" stacked, "Next" clipped to "Nex"
After	‹ 1 2 3 … › on a single row

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

@NotYuSheng, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 6 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 40aaf908-c327-430a-8bb0-2f9b6169a827

📥 Commits

Reviewing files that changed from the base of the PR and between 322f248 and 143751c.

📒 Files selected for processing (5)

• frontend/src/components/common/Pagination/Pagination.css
• frontend/src/components/common/Pagination/Pagination.tsx
• frontend/src/components/monitor/DeviceDriftPanel/DeviceDriftPanel.tsx
• frontend/src/components/monitor/IpDriftPanel/IpDriftPanel.tsx
• frontend/src/components/monitor/ProtocolDriftPanel/ProtocolDriftPanel.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[NotYuSheng]

Self-review

Reviewed the diff for correctness, scope, and regression risk. It's clean and does what it claims. Notes below.

✅ Correctness

• directionVariant="icon" is a valid SGDS value ('icon' | 'icon-text' | 'text' in Pagination.d.ts), so the compact path is type-safe — confirmed by tsc --noEmit passing.
• compact defaults to false, so every existing caller keeps the exact previous render (limit=5, icon-text, horizontal layout). Only the three drift panels opt in.
• Functionally verified in the live container: page-number, Next, and Prev clicks all advance/return the page correctly.

🔎 One line with cross-cutting reach — intentional, safe

.pagination-container .pagination { flex-wrap: wrap; } applies to all pagers, not just compact ones. This is deliberate: it's a defensive guard so no pager can spill past its container. For a full-width table that already fits on one row it's a no-op (nothing to wrap); it only activates under overflow, which is strictly better than the current clipping. Called out so a future reader doesn't mistake it for compact-only.

💅 Minor / non-blocking

• Colors in this stylesheet are hardcoded hex (pre-existing pattern); my additions only add font-size, so no new theming debt.
• Could have used a clsx-style helper for the className, but the existing file has no such helper and the ternary is readable — kept it consistent with the file.

Scope

Purely presentational; no API, DTO, or backend changes, so no OpenAPI baseline regen needed.

Verdict: LGTM. Merging is safe.