Sign up
View stargazersSign up

fix(web): the Fix action on a thread details PR row stays inside the card#31115

open4
main
GitHub fork: fix/thread-details-pr-row-overflow
opened7d agobyPpouyarezvani
2 files changed
View on GitHubTwo-way sync enabledPR last imported 41m ago

Problem

On a watched pull request whose checks show a count, the thread details row's metadata line (#number, "16/17 checks", the watch icon and the trailing action) is wider than the 280px card. Every control on that line is shrink-0 and whitespace-nowrap, so nothing gives way and the card clips the Fix action at its right edge. Longer counts, or the "Preparing..." label after clicking Fix, clip it further.

Closes #31113.

Change

On this row, the checks count control can shrink (min-w-0 shrink, which cn resolves over the control's shrink-0), and the count label truncates with an ellipsis. When space runs out, the label gives way and the trailing action (Fix, Merge, Resolve, Ready or its pending label) stays fully visible. variant="count" is only used by this row, so other checks badges are unchanged.

Scope and approval

A very small, focused fix for an obvious layout bug: an action button clipped by its container. It changes two class lists and no behavior. Reported in #31113.

Verification

  • Reproduced in 0.1.8-nightly.20261104.4179 (macOS desktop app). The card's edge cuts through Fix:

    Fix clipped at the card edge in nightly 4179

  • Before and after: I rendered the row's markup with its exact Tailwind classes at the card's 280px width (Tailwind 4, dark theme tokens), merging conflicting classes the way cn does. "Before" matches the nightly. "After" keeps Fix and "Preparing..." inside the card, and the count truncates instead:

    Before and after renders of the thread details PR row

  • Ran tailwind-merge 3.4.0 with the app's extendTailwindMerge config: cn(<meta control classes>, "min-w-0 shrink") drops shrink-0 and keeps min-w-0 shrink.

  • Not checked: I did not run the dev app or vp run check:changed, because dependencies were not installed in this checkout. As a purely visual fix, it ships with captures and no test, per AGENTS.md.

Written by Claude Opus 5.5 in Claude Code, running inside T3 Code.

🤖 Generated with Claude Code

Checks

22 successful · 9 skipped
All checks passed
3ba7811

Added 1 commit

  • fix(web): the Fix action on a thread details PR row stays inside the card4e8f78a
MmacroscopeappBot7d ago
Synced from GitHub

Approvability

Verdict: Approved at 4e8f78a

Macroscope's review found this PR approvable — The checks label can shrink and truncate so the Fix action stays inside the thread PR card. This is a localized presentation change with existing actions and check details unchanged.

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

CcoderabbitaiBot7d ago
Synced from GitHub

Explain Change →

No actionable comments were generated in the recent review.

Walkthrough

The checks control in the thread details PR row can shrink, and it hides its text span while a trailing action is pending. The completed/total and failed checks labels can shrink and truncate. Their displayed values and render conditions are unchanged.

Changes: PR row width handling

Layer / File(s)Summary
Checks row layout
apps/web/src/components/chat/ThreadDetailsPrRow.tsx, apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx		The checks control gains min-w-0 shrink and hides its text span while a trailing action is pending. The completed/total and failed count labels gain min-w-0 truncate.

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

Change: Bug fix · Severity of issue fixed: Low

Suggested labels: size:S

Suggested reviewers: t3dotgg

Merge Risk: External image Minimal · up to 3ba78

The row keeps actions visible while check details remain available. No material merge risk was identified.

Pre-merge checks: Passed 4

Check nameStatusExplanation
Title checkPassedThe title is concise, uses the repository's conventional format, and clearly describes the primary fix: keeping the Fix action inside the thread-details PR row card.
Description checkPassedThe description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the layout bug, the focused class changes, the issue reference, reproduction evidence,…
Linked Issues checkPassedIssue [#31113] requires the Fix action to remain fully inside the thread-details card. The PR gives the checks control min-w-0 shrink and truncates both count labels with min-w-0 truncate. When th…
Out of Scope Changes checkPassedThe PR changes only the thread-details checks control and the two count-variant label class lists. Each change supports the overflow fix in [#31113]. The diff does not show unrelated behavior, API cha…
Full details: Description check

Explanation

The description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the layout bug, the focused class changes, the issue reference, reproduction evidence, before-and-after UI evidence, and verification results. The initial note about not running checks is superseded by the later report that vp run check:changed passed.

Full details: Linked Issues check

Explanation

Issue [#31113] requires the Fix action to remain fully inside the thread-details card. The PR gives the checks control min-w-0 shrink and truncates both count labels with min-w-0 truncate. When the trailing action is pending, the PR hides the count text to preserve action space. These changes address the reported overflow. No additional coding or automated-test requirement appears in the issue.

Full details: Out of Scope Changes check

Explanation

The PR changes only the thread-details checks control and the two count-variant label class lists. Each change supports the overflow fix in [#31113]. The diff does not show unrelated behavior, API changes, or changes to other checks badge variants.

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 ed56aaa3dddc034d46fe08474679e6c4f2b04434 and 3ba7811778cda62967e945116661c170d2ec8eed.

External image Files selected for processing: 1

  • apps/web/src/components/chat/ThreadDetailsPrRow.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 remote-tracking branch 'github/main' into fix/thread-details-pr-row-overflow2c745e7
Mmaria7d ago

Note

Written by claude-opus-5-5 on behalf of Maria

Takeover update. The fix itself is unchanged.

  • Merged current main (298cb24140) into the branch with a merge commit. No conflicts.
  • The earlier Test Web failure was AddEnvironmentDialog.browser.test.tsx > clears the form after dismissing it on SSH, a click timeout in a file this PR does not touch. It passed 3/3 on a fresh run, and main is green.
  • vp run check:changed passes: format, lint, knip, typecheck, tests, react compiler.

Real ThreadDetailsPrRow with the app stylesheet, rendered at the card's 280px width with 16/17 checks, one failure and the watch icon:

Before (main): Fix is clipped at the card edge.

Before: thread details PR row on main, Fix action clipped at the right edge of the 280px card

After (this PR): the count truncates and Fix stays inside the card.

After: thread details PR row with this PR, checks count truncated and Fix fully visible

Added 2 commits

  • Merge remote-tracking branch 'origin/main' into fix/thread-details-pr-row-overflowed56aaa
  • fix(web): hide the checks count while the PR row action is pending3ba7811
JJulius Marminge1d ago

The automated pipeline stopped on this pull request and will not merge it:

in the real app the problem is still there, and the rework changed nothing:

No code change this round; the branch stays at 3ba7811. This round's item lists the proof steps (16/17 checks, capture Fix, click Fix, capture Preparing...) but does not say what went wrong at this head, and the PR comments hold no failure detail for 3ba7811. I checked it against the code by rendering the real ThreadDetailsPrRow with the app stylesheet (index.css) in the browser test runner, at the card's real geometry: a 280px card with the section's px-2, so a 264px row whose contents must end at 262px. Setup: PR #31115 with 15 passing, 1 failed and 1 pending check, the watch icon shown, and the handoff mocked to pending for the Preparing state. On main's classes the bug reproduces: Fix ends at 286.5px and Preparing... at 339px, past the card edge at 272px. At head both states end at 262px: Fix with the count shown as '16/17 …', and Preparing... with the count text hidden and the checks icon kept, as last round intended. A 3x screenshot of both head states shows every control inside the card. The rule for this round was to fix what the code confirms and explain anything it doesn't. The measured head is correct, so I made no change rather than add code to satisfy an item with no observed failure. If the proof run still sees a failure at this head, it needs to report what it saw (for example an element's right edge, or which control overflows) so it can be reproduced. AI-assisted; verified with the tests and tools listed above.

It stays open for a person to finish or close.

Ppouyarezvani9h ago
Synced from GitHub

@juliusmarminge @maria-rcks Thanks both for picking this up and for the extra commit that hides the count while the action is pending.

From the pipeline's last note, the current head (3ba7811) measures correctly at the card's real 280px width: Fix and "Preparing..." both end at 262px, inside the card, while main still overflows to 286.5px and 339px. All checks are green and the branch merges cleanly.

If the proof run saw something different, I'm happy to dig in. Just let me know which control it reported overflowing and I'll reproduce it in the desktop app. Otherwise, is this ready to merge?

Ppouyarezvani5h ago
Synced from GitHub

One more data point on the pipeline's "still there in the real app" note: this is the bug as it looks today in the shipped desktop app, without this PR. On each row with a failing check, the red Fix button is cut off at the card's right edge (#10752 and #10759 here). I blurred the PR titles because they're from a private repo.

Fix button clipped at the card edge in the shipped app

On this PR's head (3ba7811), the same rows keep Fix inside the card, as the pipeline's own measurements show (262px against a 264px row).