fix: make MCP sessions table scrollable with sticky header and improved pagination UI

[Pratham-Mishra04]

Summary

Improves the MCP Sessions page layout so the table fills the available viewport height and scrolls internally, rather than causing the entire page to scroll. The pagination controls are also refreshed for a cleaner appearance.

Changes

• The sessions page container is now a full-height flex column (h-[calc(100dvh-50px)]), constraining the layout to the visible viewport.
• The sessions table wrapper uses grow and overflow-hidden so the table expands to fill remaining space, with the table body scrolling independently via a sticky header.
• The Table component receives a containerClassName of h-full overflow-auto and the TableHeader is made sticky (sticky top-0 z-20 bg-muted) so column headers remain visible while scrolling.
• Pagination controls are updated: "Previous"/"Next" text labels are replaced with icon-only ghost buttons, and a "Page X of Y" indicator is added between them. Entry counts now use toLocaleString() for number formatting and the label is updated to "X–Y of Z entries".
• Filter bar and header sections are wrapped with explicit mb-4 margins to maintain spacing within the new flex layout.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

Navigate to the MCP Sessions page with a sufficient number of sessions to trigger pagination. Verify that:

1. The table fills the viewport height without the page itself scrolling.
2. The table header remains sticky as you scroll through rows.
3. Pagination shows "Page X of Y" with icon-only previous/next buttons, and entry counts are formatted with locale separators.

cd ui
pnpm i || npm i
pnpm build || npm run build

Screenshots/Recordings

Before/after screenshots of the MCP Sessions page showing the sticky header, viewport-constrained table, and updated pagination controls are recommended.

Breaking changes

• Yes
• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• UI Improvements
  • Updated the sessions page to use a full-height, flexible layout for better space usage.
  • Refined the sessions table layout with improved spacing, sticky headers, and cleaner overflow handling.
  • Simplified pagination with a compact entries range, page indicator, and smaller previous/next controls.

Walkthrough

The MCP Sessions page outer wrapper switches to a flex column layout with a computed viewport height. SessionsTable is refactored to use flex/overflow layout with a sticky table header, and the pagination controls are replaced with a compact bar showing entry range, page indicator, and ghost icon-only previous/next buttons.

Changes

MCP Sessions layout and pagination

Layer / File(s)	Summary
Page & table layout + pagination ui/app/workspace/mcp-sessions/page.tsx, ui/app/workspace/mcp-sessions/views/sessionsTable.tsx	Page wrapper changes to flex flex-col h-[calc(100dvh-50px)]; table wrapper adopts grow overflow-hidden with sticky TableHeader and containerClassName; filter bar gains mb-4 wrapper; pagination redesigned to compact entry-range text, page indicator, and ghost icon-only Prev/Next buttons.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐇 Flexbox columns, sticky rows in sight,
Pagination shrinks to icons left and right,
The viewport height now neatly set,
A layout hop I won't forget —
Bouncing through the UI with delight! 🌿

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main UI change to the MCP Sessions table and pagination.
Description check	✅ Passed	The description matches the template well and covers summary, changes, type, affected areas, testing, and other required sections.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 06-29-fix_mcp_sessions_ui_fixes

---

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

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Pratham-Mishra04]

• docs: clarify OAuth revocation behavior, disable_vk_identity flag, and token lifetime semantics #4807
• feat: revoke VK-mode OAuth2 grants on VK deletion and add user-liveness checks at refresh and request time #4806
• feat: scope pre-authenticated user requests to their representative virtual key in headers/both auth modes #4784
• feat: add virtualKeysByID secondary index and cache signing key + VK lookups on /mcp JWT auth path #4783
• feat: push OAuth2 sessions filtering and pagination to SQL with total count #4775
• fix: make MCP sessions table scrollable with sticky header and improved pagination UI #4774 👈 (View in Graphite)
• feat: add interactive MCP test client with header and OAuth auth support #4773
• fix: exclude terminal-status oauth configs from expiring token refresh query #4754
• feat: add disable_vk_identity to suppress virtual-key identity in OAuth consent flow #4751
• refactor: move Circuit Breaker above Pricing Overrides in sidebar, update icons, and fix template literal formatting #4750
• tests: add MCP auth e2e collection covering discovery, credential matrix, OAuth issuance, refresh rotation, revocation window, and runtime mode flip #4525 : 1 other dependent PR (#4744 )
• tests: add MCP auth mode e2e collection and Newman runner for headers/both/oauth #4524
• tests: add OAuth2 issuance, JWT verification, consent, discovery, sessions, and MCP auth unit tests #4523
• feat: add mcp_server_auth_mode and OAuth 2.1 gateway auth docs with gateway-auth page #4522
• ui: add OAuth Grants page and identity exact-match filter for MCP sessions #4511
• ui: add OAuth2 consent page and MCP server auth mode settings #4510
• feat: add OAuth2 session listing, revocation, family-revocation, VK liveness check, and sweep worker #4509
• feat: add JWT Bearer authentication path for /mcp with session validation and context injection #4508
• feat: add OAuth2ConsentHandler with VK, session, and user identity resolution modes #4507
• feat: add OAuth2 issuance endpoints (DCR, authorize, token) with PKCE and refresh token rotation #4506
• feat: add OAuth2 AS discovery endpoints, signing key management, and MCPServerAuthMode config #4505
• refactor: rename MCP handler files to remove underscores and drop redundant prefixes #4747
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 4/5

This is close, but the table scrolling fix should be completed before merging.

• A full page of sessions can still make the table area expand past the available viewport.
• Pagination can still end up below the visible table area instead of staying reachable.
• The pagination button test IDs were preserved.

ui/app/workspace/mcp-sessions/views/sessionsTable.tsx

Important Files Changed

Filename	Overview
ui/app/workspace/mcp-sessions/page.tsx	Adds the viewport-height flex container for the MCP Sessions page.
ui/app/workspace/mcp-sessions/views/sessionsTable.tsx	Refactors the sessions table layout and pagination, but the bounded scroll region can still expand with many rows.

_{Reviews (7): Last reviewed commit: "fix: mcp sessions ui fixes" | Re-trigger Greptile}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/app/workspace/mcp-sessions/views/sessionsTable.tsx`:
- Line 262: The pagination container in the sessions table uses a generic test
id that breaks the local naming convention and can collide with other pages.
Update the `sessionsTable.tsx` pagination wrapper to use a namespaced
`data-testid` consistent with the other `mcp-sessions-*` selectors in this view,
and verify sibling test ids nearby so the new identifier follows the existing
`entity-element-qualifier` pattern used by Playwright tests.
- Around line 262-295: The pagination footer in sessionsTable’s pagination block
is forced into a single row, causing the count text, page indicator, and
navigation buttons to collide on narrow screens. Update the footer container and
its inner controls to allow wrapping or switch to a stacked layout at small
widths so the new internal-scroll view remains usable on mobile. Focus on the
flex wrappers around the pagination area and the Button/page indicator group,
keeping the existing pagination behavior intact.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: d23ca583-e19a-4756-b2aa-3d20bb5aed34

📥 Commits

Reviewing files that changed from the base of the PR and between b95a121 and eae8b64.

📒 Files selected for processing (2)

• ui/app/workspace/mcp-sessions/page.tsx
• ui/app/workspace/mcp-sessions/views/sessionsTable.tsx

[Pratham-Mishra04]

Merge activity

• Jun 30, 1:53 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 30, 2:41 PM UTC: Graphite rebased this pull request as part of a merge.
• Jun 30, 2:42 PM UTC: @Pratham-Mishra04 merged this pull request with Graphite.

The base branch was changed.

[greptile-apps]

Scroll region still expands

This still lets the table area grow to the rows' full content height. With a full page of sessions, these growing flex children keep their default min-height: auto, so the table viewport can refuse to shrink into the remaining page space. The pagination then can be pushed below the visible area, or scrolling can move to the wrong ancestor instead of staying inside the table region.

Suggested change

	<div className="flex grow flex-col overflow-auto">
	<div className={`mb-2 grow overflow-auto rounded-sm border ${isFetching ? "opacity-70 transition-opacity" : ""}`}>
	<div className="flex min-h-0 grow flex-col overflow-auto">
	<div className={`mb-2 min-h-0 grow overflow-auto rounded-sm border ${isFetching ? "opacity-70 transition-opacity" : ""}`}>