[fix] Table header stays aligned during horizontal scroll in InfiniteVirtualTable by NamHT4Devlop · Pull Request #4697 · Agenta-AI/agenta

NamHT4Devlop · 2026-06-14T18:02:31Z

Summary

Fix table header columns becoming misaligned after horizontal scrolling in InfiniteVirtualTable.

Root cause: AntD's virtual table renders .ant-table-header (overflow: hidden) and .ant-table-body (overflow: auto) as separate DOM elements and syncs their scroll positions internally. However, after column visibility changes or scroll.x updates trigger a re-render, AntD's internal sync handler is re-registered and may not fire before the next scroll event, causing the header to drift relative to the body.

Fix: Add a passive scroll listener on .ant-table-body inside InfiniteVirtualTableInner that directly writes body.scrollLeft → header.scrollLeft on every scroll tick. The effect re-attaches whenever finalColumns or scrollConfig.x change — exactly the conditions that cause drift — and runs sync() once on mount to correct any drift that happened during the triggering re-render.

Testing

Verified locally

Toggled column visibility via the column-picker while scrolled horizontally: header stays aligned.
Resized columns while scrolled horizontally: header stays aligned.
Normal horizontal scroll before any column changes: still works correctly.
Checked that the passive listener has no measurable scroll performance impact.

Added or updated tests

N/A — this is a DOM-sync side-effect that requires a rendered browser environment to test meaningfully. Manual verification covers the affected scenarios.

QA follow-up

Test with a large number of columns (10+) so the table is horizontally scrollable.
Toggle column visibility while scrolled to the rightmost position and verify headers snap back into alignment.
Verify on Safari (different scroll event timing) as well as Chrome.

Demo

Before: After scrolling right and then toggling a column, the header row drifts and no longer aligns with the body columns.

After: Header stays perfectly aligned with body columns at all times, including after column visibility or width changes.

Checklist

I have included a video or screen recording for UI changes, or marked Demo as N/A
Relevant tests pass locally
Relevant linting and formatting pass locally
I have signed the CLA, or I will sign it when the bot prompts me

Closes #4633

Closes Agenta-AI#4633 AntD's virtual Table (rc-table with virtual prop) syncs the header's horizontal scroll position with the body internally. However, the sync can drift after: - column visibility changes (columns added/removed) - resizable-column width updates that change scroll.x - other re-renders that reset the header's scrollLeft When drift occurs, the header columns appear misaligned with the body columns whenever the user scrolls horizontally. Fix: add a passive 'scroll' listener on .ant-table-body in InfiniteVirtualTableInner that writes body.scrollLeft → header.scrollLeft on every scroll tick. The effect re-attaches whenever finalColumns or scrollConfig.x changes (the conditions under which drift can occur). In the normal (no-drift) path AntD has already run its own sync handler, so setting the same value is a no-op. When drift has occurred, this listener corrects it on the very next scroll event without any visible glitch.

vercel · 2026-06-14T18:02:38Z

@NamHT4Devlop is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-06-14T18:02:41Z

✅ Thanks @NamHT4Devlop! This PR now meets the contribution requirements and has been reopened. A maintainer will review it soon.

coderabbitai · 2026-06-14T18:02:51Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 80d8a4c9-196a-480f-a40e-c843297e60b6

📥 Commits

Reviewing files that changed from the base of the PR and between 399602a and 529dbaf.

📒 Files selected for processing (1)

web/oss/src/components/InfiniteVirtualTable/components/InfiniteVirtualTableInner.tsx

Disabled knowledge base sources:

Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📝 Walkthrough

Summary by CodeRabbit

Bug Fixes
- Fixed horizontal scroll synchronization in data tables to prevent misalignment between table headers and body content during scrolling.

Walkthrough

A useEffect is added to InfiniteVirtualTableInner that attaches a passive scroll listener to the Ant Design table body (.ant-table-body). On each scroll event, if the table header's scrollLeft differs from the body's, it is updated to match. The effect also runs a sync immediately on mount and re-runs when finalColumns or scrollConfig.x changes.

Changes

Header Horizontal Scroll Fix

Layer / File(s)	Summary
Body-to-header scroll sync effect `web/oss/src/components/InfiniteVirtualTable/components/InfiniteVirtualTableInner.tsx`	Adds a `useEffect` that queries `.ant-table-body` and `.ant-table-header`, attaches a passive `scroll` listener to sync `scrollLeft` from body to header whenever they drift, performs an immediate sync on mount, and removes the listener on cleanup. Effect dependencies are `finalColumns` and `scrollConfig.x`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Possibly related PRs

Agenta-AI/agenta#4411: Also modifies InfiniteVirtualTableInner to respond to horizontal scroll changes — uses a layoutNudge state increment to force re-render rather than directly syncing header scrollLeft.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

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

mmabrouk

Thanks @NamHT4Devlop for the PR

The demo link links to a 404 can you please update it

NamHT4Devlop · 2026-06-15T01:20:54Z

Hi @mmabrouk, thanks for the feedback! I've updated the demo image — the broken link has been replaced with a working before/after screenshot showing the misaligned vs. aligned header. The CLA has also been signed. Please let me know if anything else needs to be addressed!

Third main integration on this branch (80 commits, incl. release/v0.103.5, OSS invite hardening, single-project batch fetchers, cascade evaluator selector, table header-scroll-sync). Conflicts resolved, porting main's landed fixes onto the relocated package files (main still edits the OLD oss eval paths this branch moved): - Playground/PlaygroundHeader: kept our re-point to openWorkflowRevisionDrawerAtom (the evaluatorDrawerStore compat bridge was deleted in WP-4 residue B; 3 consumers call the underlying playground-ui atom directly). Took main's isolated-playground evaluator-create feature (currentAppSelection, handleCreatedEvaluator) and threaded its new params (isolatedPlayground/initialAppSelection/postCreateNavigation/onWorkflowCreated) through context: "evaluator-create" instead of the bridge's mode: "create". - agenta-ui InfiniteVirtualTableInner: ported main's .ant-table-header / .ant-table-body scroll-sync useEffect (#4697) into the relocated package copy; removed the leftover deleted oss original. - state/evaluator/evaluatorDrawerStore: accepted our deletion. main's added drawer params already merged into the underlying @agenta/playground-ui workflow-revision-drawer store, so no porting needed. Auto-merged eval package files verified to carry main's changes: - evaluations-ui RunDetails/Page: "SDK Evals" / kind:"custom" typeMap entry (no regression against the Q6 PreviewEvaluationType narrowing). - entities evaluationRun molecule: single-project runBatchFetcher rewrite. - annotation-ui CreateQueueDrawer: multi-select evaluator picker props. Gates: package tsc 0 errors (entities/evaluations/evaluations-ui/annotation/ annotation-ui/ui/playground-ui); lint 0; tests evaluations 133, entities 669, annotation 90. OSS tsc 355 (≤ pre-merge baseline ~363), no new signatures from touched files.

dosubot Bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Jun 14, 2026

dosubot Bot added Bug Report Something isn't working Frontend UX labels Jun 14, 2026

github-actions Bot added the incomplete-pr PR is missing required template sections or a demo recording label Jun 14, 2026

github-actions Bot closed this Jun 14, 2026

github-actions Bot removed the incomplete-pr PR is missing required template sections or a demo recording label Jun 14, 2026

github-actions Bot reopened this Jun 14, 2026

mmabrouk requested changes Jun 14, 2026

View reviewed changes

mmabrouk requested a review from ardaerzin June 15, 2026 09:10

ardaerzin approved these changes Jun 15, 2026

View reviewed changes

bekossy changed the base branch from main to release/v0.103.5 June 15, 2026 10:45

bekossy approved these changes Jun 15, 2026

View reviewed changes

dosubot Bot added the lgtm This PR has been approved by a maintainer label Jun 15, 2026

bekossy merged commit a938da1 into Agenta-AI:release/v0.103.5 Jun 15, 2026
19 of 26 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[fix] Table header stays aligned during horizontal scroll in InfiniteVirtualTable#4697

[fix] Table header stays aligned during horizontal scroll in InfiniteVirtualTable#4697
bekossy merged 1 commit into
Agenta-AI:release/v0.103.5from
NamHT4Devlop:fix/4633-table-header-scroll-sync

NamHT4Devlop commented Jun 14, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 14, 2026 •

edited

Loading

Review failed

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

mmabrouk left a comment •

edited

Loading

Uh oh!

NamHT4Devlop commented Jun 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

NamHT4Devlop commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Testing

Verified locally

Added or updated tests

QA follow-up

Demo

Checklist

Uh oh!

vercel Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

mmabrouk left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NamHT4Devlop commented Jun 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

NamHT4Devlop commented Jun 14, 2026 •

edited

Loading

github-actions Bot commented Jun 14, 2026 •

edited

Loading

coderabbitai Bot commented Jun 14, 2026 •

edited

Loading

mmabrouk left a comment •

edited

Loading