Sign up
View stargazersSign up

fix(web): lineage show-more no longer clips the last row or drops focus#31295

open2
main
GitHub fork: fix/lineage-show-more
opened6d agobyJJustin Jacob
2 files changed
View on GitHubTwo-way sync enabledPR last imported 1d ago

Problem

In the thread details card, the Lineage "Previous agents" list has three defects in the same component:

  1. Rows are 2rem high, and the list was capped at 13.5rem (6.75 rows), so the seventh row renders clipped at 75% height with no way to see its full text without a keyboard scroll.
  2. When "Show more" made the list overflow, a scrollbar appeared and stole 6px from the rows, shifting every row sideways and misaligning them against the rows above.
  3. Clicking "Show more" on the final page unmounted the button and dropped keyboard focus to document.body.

Reproduce: open a thread whose previous agents number more than 6 and click "Show 12 more". Expected behavior is a list that renders whole rows, a stable layout when the scrollbar appears, and focus retained on the list when the button disappears.

Change

apps/web/src/components/chat/ThreadRelationshipsControl.tsx:

  • Cap is 14rem (exactly seven 2rem rows) instead of 13.5rem.
  • List carries scrollbar-gutter-stable so the 6px scrollbar reserves space instead of narrowing rows.
  • The list has tabIndex={-1} and a ref; when "Show more" empties the hidden rows on the last page, focus moves to the list with preventScroll: true, on the same condition that unmounts the button. The list also carries outline-none plus a quiet focus-visible inset ring, matching the TimelineWorkGroupRows pattern.

apps/web/src/components/chat/ThreadRelationshipsControl.browser.test.tsx:

  • one new browser test that builds 7 completed subagents, pages to the final row, and asserts focus lands on the list.

Scope and approval

Small, focused fix of one component and its test. Why it qualifies without a prior issue or approval: it's an obvious bug fix in one spot, no new workflow/API/contract/setting is introduced, and no unrelated cleanup rides along. The two-file diff is the whole change.

The adjacent PR #22385 (scrollbar-gutter shift only, still open and conflicting) is covered by this change; this PR additionally fixes the clipped row and the focus drop, all in the same component. This PR could supersede #22385.

Verification

  • Focused test: vp test run apps/web/src/components/chat/ThreadRelationshipsControl.browser.test.tsx passes (11 tests).
  • The new test fails before the fix (focus drops to document.body when the button unmounts; verified by temporarily removing the focus hand-off) and passes after.
  • vp run check:changed green after rebase onto latest main (format, lint, knip, typecheck, tests beside changes, react compiler).
  • Manual check in an isolated worktree reading a seeded dev copy of ~/.t3/userdata/statev2.sqlite (the worktree's .t3, never the live DB): a thread with 8 real previous agents shows whole rows at 7, the scrollbar reserves its gutter, and the wheel-scroll works without trapping scroll chaining into the card above.
BeforeAfter

Open, directly relevant

Open issues, same list

Merged recently, useful context

Discussions

No issue exists for this exact bug. The closest prior work sailed without one (#22385).

Model and harness

Pulse Alpha Free via OpenCode in T3 Code.

Checks

21 successful · 10 skipped
All checks passed
162c316

Added 1 commit

  • fix(web): lineage show-more no longer clips the last row or drops focuse784bfa
MmacroscopeappBot6d ago
Synced from GitHub

Approvability

Verdict: Approved at e784bfa

Macroscope's review found this PR approvable — The change adjusts related-thread list sizing and preserves focus when the final Show more button disappears. Its effects are limited to presentation and accessibility, with pagination and underlying thread behavior unchanged.

You can add or adjust custom eligibility rules. Learn more.

CcoderabbitaiBot6d ago
Synced from GitHub

Explain Change →

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

External image Run configuration

External image Commits

Reviewing files that changed from the base of the PR and between e784bfa74be122d0ffe14956e47c729c27cd90ff and 162c316fa016b64954605a1bec8af8d8f29ca4c0.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • Trigger review

No actionable comments were generated in the recent review.

Walkthrough

The Related threads list now receives focus when showing the final rows removes the “Show more” button. The list’s height cap and scrollbar styling also change. A browser test verifies focus retention.

Changes: Related threads focus

Layer / File(s)Summary
Focus handling and validation
apps/web/src/components/chat/ThreadRelationshipsControl.tsx, apps/web/src/components/chat/ThreadRelationshipsControl.browser.test.tsx		The “Show more” handler focuses the list when the remaining rows fit within one page. The list gains programmatic focus, a focus ring, stable scrollbar-gutter styling, and a 14rem height cap. A browser test checks that focus remains on the list after showing the final rows.

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Possibly related PRs

Suggested reviewers: t3dotgg, shivamhwp, macroscopeapp

Merge Risk: External image Minimal · previous review e784b

The change preserves focus when the final “Show more” button disappears, with no verified merge-blocking risk.

Pre-merge checks: Passed 4

Check nameStatusExplanation
Title checkPassedThe title names the fix area (lineage show-more) and two of its defects: the clipped last row and the dropped focus. It matches the changeset, which caps the list at seven 2rem rows, adds scrollbar-gu…
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Description checkPassedThe description follows the repository template. It has Problem, Change, Scope and approval, Verification, and Model and harness sections. The problem is stated with three defects, expected behavior, …
Full details: Title check

Explanation

The title names the fix area (lineage show-more) and two of its defects: the clipped last row and the dropped focus. It matches the changeset, which caps the list at seven 2rem rows, adds scrollbar-gutter, and moves focus to the list on the final page. It leaves out the scrollbar layout shift, which is a minor omission. The title uses the conventional commit format, is one sentence, and is under 72 characters.

Full details: Description check

Explanation

The description follows the repository template. It has Problem, Change, Scope and approval, Verification, and Model and harness sections. The problem is stated with three defects, expected behavior, and reproduction steps. The change lists the cap, scrollbar-gutter, and focus hand-off edits by file. Verification reports a focused test run (11 tests), a fail-before and pass-after check, a green check:changed run, and a manual check. Before/after screenshots are embedded. The Scope section argues the change qualifies as a small, focused fix without a prior issue, and it links related PRs and issues. The template requires a linked triaged issue or maintainer approval, or an explicit justification for a small obvious fix. The author gives that justification, and the no-issue note is explicit. The template is also satisfied for the model and harness line. The main weakness is the scope exemption rests on the author's own judgment that this is an obvious bug fix, and the Problem section is not a single underlying problem, since it bundles three defects. Those points are arguable but do not leave the description largely incomplete.

Finishing Touches

Generate unit tests (beta)

  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
External image Recent review info

External image Run configuration

External image Commits

Reviewing files that changed from the base of the PR and between 67eebaca23f8f7bc46e8817434087fc9c5acf8e3 and e784bfa74be122d0ffe14956e47c729c27cd90ff.

External image Files selected for processing: 2

  • apps/web/src/components/chat/ThreadRelationshipsControl.browser.test.tsx
  • apps/web/src/components/chat/ThreadRelationshipsControl.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Added 1 commit

  • Merge branch 'main' into fix/lineage-show-more162c316