Skip to content

fix(web): round the trailing PR checks hover surface - #16543

Closed
nkumar-aw wants to merge 1 commit into
pingdotgg:mainfrom
nkumar-aw:fix/thread-pr-checks-hover
Closed

nkumar-aw wants to merge 1 commit into
pingdotgg:mainfrom
nkumar-aw:fix/thread-pr-checks-hover

Conversation

@nkumar-aw

Copy link
Copy Markdown

The checks button at the end of a thread details PR row paints a square hover surface over the row's rounded edge. Neighboring editor and Git action controls already round their outer corners.

Add last:rounded-e-lg to the checks segment. It rounds the outer edge only when checks end the row. Checks before a Fix or Merge action keep square inner corners. This is a small, focused fix for an obvious visual bug, with no product behavior change.

Verification

  • Start an isolated dev server with pnpm exec vp run dev --home-dir /Users/nandakumar/Personal/t3code/.t3.
  • Create a test thread and link merged PR chore(deps): upgrade @effect/tsgo to 0.46.1 #16360. Hover its green checks button. Before: all four corners measure 0px. After: right corners measure 10px; left corners stay 0px.
  • Open and dismiss the checks popover. Hover remains rounded and the popover still works.
  • Link failing, non-draft PR fix(server): Claude threads no longer get ACP and Codex tool instructions #16482. Checks before its Fix action still measure 0px on all corners.
  • Inspect neighboring editor, Git action, branch, script, and Changes controls. Their outer corners remain rounded.
  • pnpm exec vp test run apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts apps/web/src/components/ThreadStatusIndicators.test.ts: 181 tests pass.
  • pnpm exec vp lint apps/web/src/components/chat/threadDetailsPanelStyles.ts: passes.
  • pnpm --filter @t3tools/web typecheck: passes.
  • pnpm --filter @t3tools/web build: passes, with chunk-size warnings.

Verified in the web client on macOS. Desktop uses this same web component; Electron and native mobile were not tested. Mobile viewport resizing timed out in the Browser panel. Node is v26.7.0; the repository requests ^24.13.1.

Nightlies build from main, not a separate nightly branch, so this PR targets main.

Before / after

Screenshots show the same hovered button in the dev server. The crops enlarge the panel without changing its content. Evidence lives in the fork's evidence-only prerelease, not in the code diff.

Before After
Square checks hover Rounded checks hover

Model: GPT-6.1 Sol (openai/gpt-6.1-sol). Harness: OpenCode through T3 Code.

@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Oct 6, 2026
@macroscopeapp

macroscopeapp Bot commented Oct 6, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved at 69f0ccb

Macroscope's review found this PR approvable — This focused one-line CSS-class change rounds the trailing PR checks hover surface without changing application logic or existing control behavior. Its impact is limited to presentation in the web thread-details panel.

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

@coderabbitai

coderabbitai Bot commented Oct 6, 2026

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: dcfc35cf-59fc-45aa-98c5-37cdf42ed601
📥 Commits

Reviewing files that changed from the base of the PR and between 9503155 and 69f0ccb.

📒 Files selected for processing (1)
  • apps/web/src/components/chat/threadDetailsPanelStyles.ts

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


📝 Walkthrough

Walkthrough

The split-checks style now rounds the trailing end of the last segment.

Changes

Thread details panel styling

Layer / File(s) Summary
Round the last split-checks segment
apps/web/src/components/chat/threadDetailsPanelStyles.ts
THREAD_DETAILS_PANEL_SPLIT_CHECKS_CLASS adds last:rounded-e-lg to round the trailing end of the last segment.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~2 minutes

Change: Bug fix

Suggested reviewers: rakshithbhat03

Merge Risk: ⚪ Minimal · up to 69f0c

The change is limited to the checks segment’s trailing corner styling and does not alter when checks appear. No merge-blocking issue was identified.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: rounding the trailing hover surface for PR checks.
Description check ✅ Passed The description explains the visual problem, the change, why the focused fix needs no prior approval, and the verification results. It also includes before-and-after screenshots and notes untested env…
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 unit tests (beta)
  • Create a new PR
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

@nkumar-aw

Copy link
Copy Markdown
Author

Closing to recreate this PR from my personal account with the same fix and screenshots.

@parzival1l

Copy link
Copy Markdown

Replaced by #16548 from my personal account. This PR stays closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS 0-9 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants